No renderiza espacios en blanco formateando html en la página web

Tengo el siguiente código para generar algunos tramos usando el ayudante de CakePHP

Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?>

Esto genera el siguiente código:

 
12

El problema es que el navegador representa un espacio después del que no quiero.

Mi solución hasta ahora es escribir el pastel de la siguiente manera:

 
12

con la etiqueta de cierre en la misma fila que el pero eso divide el formato y hace que la fuente sea más difícil de leer.

¿Hay una mejor manera?

¡Buenas noticias! Hay un estilo CSS que tiene como objective resolver este problema exacto. Se llama white-space-collapse , y se ve así en su hoja de estilo:

 #numberRow {white-space-collapse: discard;} 

En los navegadores que lo admiten, esto hará que se elimine el espacio en blanco entre las tags dentro de

si no hay otros caracteres a su alrededor.

Ahora, por las malas noticias … no hay un solo navegador que lo soporte aún. 🙁

Es probable que los navegadores que se mueven más rápido lo admitan muy pronto (estaría dispuesto a apostar que estará en Chrome al menos para fin de año), pero eso no será suficiente para que valga la pena usarlo para algunos tiempo por venir.

Mientras tanto, este es un problema común que afecta a muchos diseñadores de sitios.

La solución más común es simplemente eliminar los espacios en blanco de su código fuente, según el ejemplo que dio en la pregunta. No es ideal, pero resuelve el problema y sin ningún tipo de intromisión.

Si está decidido a mantener su código fuente ordenado (o simplemente no puede evitarlo debido a un marco que está utilizando, o lo que sea), hay algunas soluciones más hacky:

Primero es usar un reemplazo de cadena de Javascript cuando la página se carga para recortar los espacios no deseados. Esto es complicado, pero funciona, excepto en las raras ocasiones en que el usuario ha desactivado javascript. Es posible que algunos problemas de actualización de la página se carguen primero con el diseño único y que luego se sincronicen automáticamente con el diseño correcto, pero probablemente será mínimo (según la velocidad del navegador y la escala del problema).

Una solución aún más desordenada, pero sin dudas un truco inteligente, es establecer font-size:0; para el elemento primario (en su caso, el

), y luego vuelva a establecer font-size correcto para los elementos de contenido. p.ej:

 #numberRow {font-size:0;} #numberRow>span {font-size:12px;} 

(reemplazando ’12px’ con el tamaño que quiera que sean, por supuesto)

Las desventajas de esto son: En primer lugar, es un hack horrible; en segundo lugar, es un truco horrible; y, en tercer lugar, puede hacer que el tamaño de la fuente sea difícil de controlar si está usando una distribución de tamaño basada en em en lugar de fonts fijas de tamaño de píxel. Pero funciona

En general, mi recomendación es ir con la respuesta fácil y eliminar los espacios en su código PHP. Al menos hasta que la solución CSS adecuada esté en su lugar en la mayoría de los buscadores de personas.

Espero que ayude.

¿Podrías hacer esto?

 
Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?>