HTML/CSS: ¿la mejor práctica para preservar el espacio en blanco en ciertos elementos?

¿Cuál es la mejor forma de para preservar el espacio en blanco en HTML? Tenemos muchas páginas que reducen los datos de nuestra base de datos, y los datos pueden tener múltiples espacios. Los elementos HTML prestados que contienen los datos varían de etiquetas de anclaje (<a>), spans (<span>), table rows (<tr>, <td>, etc.HTML/CSS: ¿la mejor práctica para preservar el espacio en blanco en ciertos elementos?

La cosa más fácil de hacer en este momento sería añadir una clase css mundial de este modo:

body a, span, tr, td { white-space: pre; }

Me pregunto si hay una mejor forma de implementar esto sin asignando una clase a cada elemento HTML individual.

Fuente

2012-01-24 contactmatt

En su ejemplo no se utiliza una clase css y no es necesario que asigne una clase a cada elemento individual. –

@ RichardMarskell-Drackir Sí, rara vez trato con CSS, no sé CSS muy bien jaja – contactmatt

me gustaría utilizar la misma técnica, pero dentro de un contenedor de clase de datos donde se necesita:

.data a, .data span, .data tr, .data td { white-space: pre; }

HTML:

<div class="data"> 
.... 

</div>

Fuente

2012-01-24 21:38:48

Esta es una buena idea. Es mucho más fácil ajustar la salida, que cambiar todas las etiquetas en esa salida. –

¡Funciona como un encanto! –

Lo que está mal con la sustitución de los espacios por & nbsp ;? Esto debería funcionar dentro de cualquier elemento y preservar los espacios en la salida representada.

Fuente

2012-01-24 21:42:44

+10

Lo malo de esto es que hay 26 espacios en blanco diferentes ('\ x09 \ x0A \ x0B \ x0C \ x0D \ x20 \ xA0 \ u1680 \ u180E \ u2000 \ u2002 \ u2002 \ u200bdn \ u201F \ u205F \ u000d \ u2028 \ u2029 \ u2029 \ uFEFF') (http://perfectionkills.com/whitespace-deviations/ listas 25, pero también hay '\ uFEFF') y el ancho de" blanco- espacio "no es lo mismo en todos los espacios en blanco posibles.Depende del diseñador de fuentes decidir el ancho del carácter, también el carácter de espacio en blanco. Si reemplaza espacio ('\ x20') con , debería estar bien, pero hay otros 25 espacios en blanco posibles para cuidar. –

Según el idioma del lado del servidor, puede tener algo como char.iswhitespace http://msdn.microsoft.com/en-us/library/system.char.iswhitespace.aspx que hace que sea fácil reemplazar todos los caracteres de espacio en blanco. –

Sin embargo, usando el espacio en blanco: la opción pre ha sido más simple/más fácil en mi opinión ya que puede cambiar la hoja de estilo sin cambiar su código. –

Esto depende de si desea conservar todos los espacios en blanco en ciertos elementos y qué debería ocurrir exactamente allí. Suponiendo que no hay reglas CSS que podrían interferir, el CSS se puede simplificar a

a, span, tr { white-space: pre; }

porque es un elemento a todos los días dentro de body y td por defecto hereda la propiedad de tr.

Si solo desea evitar que se multipliquen espacios múltiples, en lugar de forzar la división fija a líneas, entonces white-space: pre-wrap o reemplazar espacios por espacios sin interrupción podría ser más adecuado.

Finalmente, la necesidad y las posibilidades de restringir la regla a los elementos seleccionados dependen en gran medida de cómo se realice la selección. Quizás puede establecer selectivamente white-space en pre (o pre-wrap) en algunos elementos que encierran las partes relevantes, recordando que la propiedad hereda si no está configurada en elementos internos.

También puede interrumpir la herencia: podría configurar white-space: pre en un elemento table por ejemplo, si desea hacer que la regla se aplica a más del contenido, y establecer white-space: normal en esas filas o celdas en las que no es para ser aplicado.

Fuente

2012-01-24 22:03:54

<pre>no need for  style</pre>

Fuente

2014-07-10 02:11:42 LastTribunal

Tenga en cuenta que la etiqueta 'pre' generalmente se muestra como un elemento' block'. –

HTML/CSS: ¿la mejor práctica para preservar el espacio en blanco en ciertos elementos?

Respuesta

Cuestiones relacionadas