Espacio en blanco - Trucos CSS

La propiedad de espacio en blanco controla cómo se maneja el texto en el elemento al que se aplica. Digamos que tiene HTML exactamente como este:

 A bunch of words you see. 

Has diseñado el div para que tenga un ancho establecido de 100px. Con un tamaño de fuente razonable, es demasiado texto para caber en 100 píxeles. Sin hacer nada, el white-spacevalor predeterminado es normaly el texto se ajustará. Vea el ejemplo a continuación o sígalo en casa con la demostración.

div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )

Si desea evitar que el texto se ajuste, puede aplicar white-space: nowrap;

Observe que en el ejemplo de código HTML en la parte superior de este artículo, en realidad hay dos saltos de línea, uno antes de la línea de texto y otro después, que permiten que el texto esté en su propia línea (en el código). Cuando el texto se representa en el navegador, esos saltos de línea aparecen como si estuvieran eliminados. También se eliminan los espacios adicionales en la línea antes de la primera letra. Si queremos forzar al navegador a mostrar esos saltos de línea y espacios en blanco adicionales, podemos usarwhite-space: pre;

Se llama preporque el comportamiento es que, como si hubieras envuelto el texto en

etiquetas (que de forma predeterminada manejan los espacios en blanco y los saltos de línea de esa manera). El espacio en blanco se respeta exactamente como en el HTML y el texto no se ajusta hasta que hay un salto de línea en el código. Esto es particularmente útil cuando se muestra literalmente código, lo que se beneficia estéticamente de algún formato (¡y algo de tiempo es absolutamente crucial, como en los lenguajes que dependen de los espacios en blanco!)

Quizás le guste cómo prerespeta los espacios en blanco y los saltos, pero necesita que el texto se ajuste en lugar de salirse potencialmente de su contenedor principal. Para eso white-space: pre-wrap;es:

Finalmente, white-space: pre-line;dividirá las líneas donde se rompen en el código, pero aún se eliminan los espacios en blanco adicionales.

Curiosamente, no se respeta el salto de línea final. Según la especificación CSS 2.1: "Las líneas se interrumpen en los caracteres de nueva línea conservados y según sea necesario para llenar los cuadros de línea". así que quizás eso tenga sentido.

Aquí hay una tabla para comprender los comportamientos de todos los diferentes valores:

	Nuevas lineas	Espacios y tabulaciones	Ajuste de texto
normal	Colapso	Colapso	Envoltura
pre	Preservar	Preservar	Sin envoltura
Nowrap	Colapso	Colapso	Sin envoltura
preenvolver	Preservar	Preservar	Envoltura
prelínea	Preservar	Colapso	Envoltura

En CSS3, la white-spacepropiedad literalmente seguirá ese gráfico y asignará las propiedades text-space-collapsey en text-wrapconsecuencia.

Más información

• Documentos de Mozilla

Soporte del navegador

Un poco más complejo que la tabla de soporte regular, ya que cada valor tiene diferentes niveles de soporte:

Navegador	Versión	Soporte de
explorador de Internet	5.5	normal | nowrap
	6.0	normal | pre | nowrap
	8+	normal | pre | nowrap | pre-wrap | pre-line
Firefox (Gecko)	1,0 (1,0)	normal | pre | nowrap | -moz-pre-wrap
	3,0 (1,9)	normal | pre | nowrap | pre-wrap | -moz-pre-wrap
	3,5 (1,9,1)	normal | pre | nowrap | pre-wrap | pre-line
Ópera	4.0	normal | pre | nowrap
	8.0	normal | pre | nowrap | pre-wrap
	9.5	normal | pre | nowrap | pre-wrap | pre-line
Safari (WebKit)	1,0 (85)	normal | pre | nowrap
	3,0 (522)	normal | pre | nowrap | pre-wrap | pre-line