Teoría
Teoría

Controlamos los espacios: white-space

El navegador ignora los espacios múltiples y los saltos de línea en el código HTML. Este comportamiento puede cambiarse con la etiqueta <pre>.

Sin embargo, con CSS se puede controlar el manejo de espacios y saltos de línea de una forma más flexible. De eso se encarga la propiedad white-space, cuyos valores son:

nowrap: muestra todo el texto en una sola línea, sin saltos;
pre: conserva los espacios y los saltos tal como aparecen en el código fuente, igual que la etiqueta <pre>;
pre-wrap: funciona como pre, pero añade saltos automáticos si el texto no cabe en el contenedor;
normal: modo predeterminado.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Controlamos los espacios: white-space</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>La larga y... sorprendente historia de cómo surgió el enfoque para crear interfaces resistentes: Progressive Enhancement</h1> <p class="nowrap">En resumen, este trabajo descuidado con la tolerancia a fallos ya había cansado bastante a los desarrolladores «serios», así que había que hacer algo.</p> <p class="like-pre"> Progressive Enhancement surgió como respuesta al mal Graceful Degradation. Ahora los desarrolladores y diseñadores realmente buenos pueden aplicar Progressive Enhancement, y los demás no, porque es más difícil y requiere más trabajo. Además, el nuevo enfoque absorbió todas las mejores prácticas de Graceful Degradation. </p> </body> </html>

CSS

h1 { font-size: 24px; }

ObjetivosRealizado

Comprueba cómo la propiedad white-space afecta a la visualización del texto.

Asigna al encabezado white-space: pre-wrap;.
Asigna al párrafo con clase nowrapwhite-space: nowrap;.
Asigna al párrafo con clase like-prewhite-space: pre;.