html - reservas - que es un espacio natural protegido ejemplos
HTML/CSS: ¿la mejor práctica para preservar el espacio en blanco en ciertos elementos? (4)
¿Cuál es la mejor manera de 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 representados que contienen los datos varían desde etiquetas de anclaje (<a>), spans (<span>), table rows (<tr>, <td>, etc.
Lo más fácil de hacer en este momento sería agregar una clase css global como esta:
body a, span, tr, td { white-space: pre; }
Me pregunto si hay una mejor manera de implementar esto sin asignar una clase a cada elemento HTML individual.
¿Qué hay de malo en reemplazar espacios por & nbsp ;? Esto debería funcionar dentro de cualquier elemento y preservar los espacios en la salida representada.
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 de CSS que puedan interferir, su CSS se puede simplificar a
a, span, tr { white-space: pre; }
porque un elemento a está siempre dentro del body y td hereda la propiedad de tr .
Si solo desea evitar que se multipliquen varios espacios, en lugar de forzar la división fija a líneas, 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 debe hacer la selección. Quizás puede configurar de forma selectiva white-space en white-space para pre (o pre-wrap ) a algunos elementos que encierran las partes relevantes, recordando que la propiedad hereda si no está configurada en elementos internos.
También puede romper la herencia: puede establecer white-space: pre en un elemento de table , por ejemplo, si desea hacer que la regla se aplique a la mayor parte del contenido, y establezca white-space: normal en esas filas o celdas donde no debe ser aplicado.
Usaría 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>
<pre>no need for style</pre>