Cuando una línea no se rompe

Esperamos que una línea se rompa cuando el texto de esa línea alcance los límites del cuadro principal. Vemos esto cada vez que creamos un párrafo, como este. Cuando el cuadro principal no tiene suficiente espacio para la siguiente palabra en una línea, la divide, baja a la siguiente línea y repite ese proceso.

Bueno, así es como funciona cuando las palabras están separadas por espacios u otros espacios en blanco. En lo que respecta a CSS, hay cinco (!) propiedades que posiblemente pueden afectar cómo y cuándo se rompe una línea. Pero no volvamos a entrar en todo eso. En su lugar, veamos una situación en la que parece que una línea se va a romper, pero no es una excusa para aprender algo sobre el salto de línea.

¿Qué sucede en una situación en la que el navegador no tiene forma de saber cuándo puede hacer una pausa?

Metámonos en una mala situación con una “lista de etiquetas” y luego salgamos de ella. Aquí está nuestro marcado:

ul  liPHP/li  liJavaScript/li  liRust/li  !-- etc. --/ul

A continuación, aplicaremos CSS que sobrescribe el estilo de lista predeterminado de su orientación vertical predeterminada a horizontal haciendo que los elementos de la lista se muestren en línea.

ul {  margin: 0;  padding: 0;  list-style: none;}
li {  display: inline;  padding-right: 5px;} 

La lista se ve tal como la queremos. Agregué un poco de espacio entre un elemento de la lista y otro, para que no parezca demasiado abarrotado.

Ahora introduzcamos un elemento envolvente a la mezcla. Eso es esencialmente un div alrededor de la lista desordenada. Podemos darle una clase, digamos .tags.

div  ul    liPHP/li    liJavaScript/li    liRust/li  /ul/div  

Digamos que queremos darle al contenedor un ancho fijo de 200 px. Ahí es donde deberíamos esperar ver saltos de línea cuando la lista desordenada choca con los límites del contenedor.

.tags {  width: 200px;}

Aquí viene la parte interesante. Mucha gente utiliza minificadores en su proceso de compilación para reducir el tamaño de los archivos eliminando valores innecesarios. Algunos de estos valores son espacios en blanco, que incluyen espacios, tabulaciones y saltos de línea (como retornos de carro y saltos de línea) que se utilizan con fines de formato pero que minifies consideran irrelevantes para el resultado final.

Si “minimizamos” nuestro HTML eliminando nuevas líneas, esto es lo que obtenemos:

divulliPHP/liliJavaScript/liliRust/li/ul/div

UH OH. Como puede ver, la lista ya no se rompe en el límite de 200 píxeles. ¿Por qué? ¿Qué es diferente ahora? Personalmente, pensé que a HTML no le importaban los espacios en blanco. ¿Qué tiene de diferente la versión minimizada del marcado original?

Al navegador realmente le importan los espacios en blanco… pero sólo a veces. Y éste resulta ser uno de esos casos. Cuando se analiza la página, el analizador ve esta lista como una palabra larga porque, desde su perspectiva, no hay caracteres que diferencien una de otra.

Uno podría pensar que tener el acolchado está afectando las cosas. Pero si eliminamos el relleno de los elementos de nuestra lista, seguiremos obteniendo el mismo resultado… sólo que sin espacios entre los elementos.

El navegador ve la lista completa como una sola palabra.

Podemos obtener saltos de línea naturales a partir de caracteres especiales.

Además de los espacios, excluyendo los espacios que no se separan ( nbsp;), hay otros caracteres que forzarán un salto de línea, entre ellos:

• Después del guión ( -)
• Después de un guión ( –)
• Antes y después del guión ( —)
• Después del signo de interrogación ( ?)
• Espacio en blanco de ancho cero ( U+200Bo #8203;)

Estos saltos de línea ocurren en el momento de la renderización, lo que significa que el navegador todavía los ve como una palabra larga. Agregar un nuevo elemento de lista a la lista de etiquetas con cualquiera de estos caracteres forzará un salto de línea. Agreguemos “Objective-C” a la lista. Su nombre contiene un guión, que podemos utilizar para ver cómo afecta a las cosas.

Para mejorar la legibilidad, el código tendrá sangría y una nueva línea.

div  ul    liPHP/li    liJavaScript/li    liRust/li    liObjective-C/li  /ul/div 

Eso es bueno. Veamos tres soluciones para nuestra lista sin saltos de línea en este sentido.

Solución 1: agregue uno de los personajes de última hora

Podemos seguir forzando saltos de línea con esos caracteres que se rompen como acabamos de hacer. Pero recuerde, si está utilizando un minificador, agregar espacios dentro o después de la etiqueta de cierre no garantizará que no se elimine, ya que no todos los minificadores funcionan de la misma manera.

div  ul    liPHP /li    liJavaScript /li    liRust /li    liObjective-C /li  /ul/div

Solución 2: utilizar pseudoelementos

El carácter de ruptura también se puede agregar usando los pseudoelementos ::beforey en CSS. ::afterLo que hace que esta solución sea efectiva es que no se ve afectada por un minificador de HTML porque el espacio en blanco se agrega cuando se aplica CSS.

Pero, antes de continuar, hablemos un momento sobre el colapso de los espacios en blanco.

El navegador colapsa los espacios en blanco antes y después de un carácter que fuerza un salto de línea dentro de los elementos en línea. Con esto en mente, hay un pequeño truco al usar ::aftery la propiedad de contenido con espacios en blanco y display: inline-block. El elemento de bloque en línea agrega un carácter de ruptura al final del texto. Luego, el espacio de propiedad del contenido viene después del carácter de ruptura creado por el elemento de bloque en línea, lo que da como resultado que el espacio se elimine en el momento de la renderización. Es decir, a menos que la propiedad de espacio en blanco esté configurada en pre.

Solución 3: utilice bloque en línea en su lugar

Quizás te hayas encontrado antes con una pelea con el espacio entre elementos de bloques en línea en CSS. Podemos usar el valor del bloque en línea en la propiedad de visualización para forzar un salto de línea porque el elemento del bloque en línea ya tiene el espacio en blanco adicional que necesitamos. Esto funciona de manera similar a agregar un carácter de espacio de ancho cero, pero los elementos de la lista no tendrán separación visual.

Solución 4: use flex o inline-flex

Otra solución es definir la lista desordenada como un contenedor flexible, lo que nos permite usarla flex-flowpara establecer la dirección de la lista y asegurarnos de que tenga varias líneas cuando sea necesario.

También podemos recurrir a la solución display: inline-flexen lugar de inline-block. La idea aquí es que todo el contenedor flexible se muestre en línea.

Entonces, comenzamos esta publicación con una situación que podría surgir al usar un minificador. Dicho esto, los minificadores (y muchas bibliotecas) son inteligentes e intentarán evitar que ocurra este problema de ruptura de línea.

Claro, no es una situación muy común con la que toparse. Realmente es una de esas cosas que pueden pasar desapercibidas si no prestamos atención pero, si sucede, al menos sabemos que hay formas de solucionarlo.