Teoría
Teoría

La propiedad white-space: espacios y saltos de línea

Como ya sabes, el navegador colapsa los espacios consecutivos y los saltos de línea del código HTML. La etiqueta <pre> permite conservarlos.

Con CSS podemos controlar ese comportamiento de forma más flexible. La propiedad white-space admite estos valores:

nowrap: colapsa los espacios consecutivos y muestra el texto en una sola línea, sin saltos automáticos;
pre: conserva los espacios y saltos de línea del código, como la etiqueta <pre>;
pre-wrap: conserva los espacios y saltos de línea como pre, pero también permite saltos automáticos cuando el texto no cabe en el contenedor;
normal: es el comportamiento predeterminado. Colapsa los espacios consecutivos y los saltos de línea del código, permite saltos automáticos y elimina los espacios al final de las líneas.

La especificación también recoge estos valores:

break-spaces: se parece a pre-wrap, pero conserva también el espacio que ocupan los espacios al final de las líneas y permite saltar de línea después de cada espacio conservado;
pre-line: colapsa los espacios consecutivos como normal, pero respeta los saltos de línea del código. También permite saltos con <br> y cuando la línea se llena.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Diario de alguien que empieza con HTML y CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p class="page-title">Blog</p> <nav class="blog-navigation"> <a href="index.html">Inicio</a> </nav> </header> <main> <article> <h1>Día 6. Sigo sin entender nada</h1> <p class="nowrap">Hoy visité varios sitios para ver cómo estaban hechos. Encontré unas citas y dos etiquetas que no conocía: <code><cite></code> y <code><blockquote></code>.</p> <p class="like-pre">No entendí en qué se diferencian. Cerré el navegador. Lo investigaré mañana.</p> <p>Esto fue lo que vi.</p> <pre><code><blockquote> <p>La mente vale más cuando baja la fuerza.</p> <cite>Jason Statham</cite> </blockquote></code></pre> </article> <aside class="partnership"> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 24px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } del { color: #ff4400; } ins { color: rgb(105, 178, 83); } .page-title { font-weight: bold; font-size: 36px; line-height: 42px; font-family: "Verdana", sans-serif; text-align: center; } .avatar-container { text-align: center; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h2 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } .partnership { margin: 30px 0; padding: 30px; text-align: center; color: #ffffff; background-color: #4a87fa; background-image: url("img/bg-partnership.svg"); } footer { margin-top: 30px; }

ObjetivosRealizado

Establece white-space: pre-wrap para el encabezado h1.
Crea una regla para .nowrap y establece white-space: nowrap.
Crea una regla para .like-pre y establece white-space: pre.