Cuando una línea no se rompe | Programar Plus

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, lo divide y se mueve hacia 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. Sin embargo, no entremos en todo eso de nuevo. 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 la ruptura de líneas.

¿Qué sucede en una situación en la que no hay forma de que el navegador sepa cuándo está bien 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>
  <li>PHP</li>
  <li>JavaScript</li>
  <li>Rust</li>
  <!-- etc. -->
</ul>

A continuación, aplicaremos CSS que sobrescribe el estilo de lista predeterminado desde 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 exactamente como la queremos. Agregué un poco de espacio entre un elemento de la lista y otro, para que no se vea demasiado abarrotado.

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

<div class="tags">
  <ul>
    <li>PHP</li>
    <li>JavaScript</li>
    <li>Rust</li>
  </ul>
</div>

Digamos que queremos darle al envoltorio un ancho fijo de 200px. 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 usa minificadores en su proceso de construcción para reducir el tamaño de los archivos al deshacerse de los valores innecesarios. Algunos de estos valores son espacios en blanco, que incluyen espacios, tabulaciones y saltos de línea (como retorno de carro y salto de línea), caracteres que se utilizan con fines de formato, pero que las minificaciones consideran irrelevantes para el resultado final.

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

<div class="tags"><ul><li>PHP</li><li>JavaScript</li><li>Rust</li></ul></div>

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

El navegador realmente se preocupa por los espacios en blanco … pero solo a veces. Y este 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 a unos de otros.

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

El navegador ve la lista completa como una sola palabra.

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

Además de los espacios, excluyendo los espacios sin ruptura (&nbsp;), hay algunos otros caracteres que forzarán un salto de línea, que incluyen:

• Después del guión (-)
• Después de un guión (–)
• Antes y después de em dash (—)
• Después del signo de interrogación (?)
• Espacio en blanco de ancho cero (U+200B o ​)

Estos saltos de línea ocurren en el tiempo de renderizado, lo que significa que el navegador todavía ve esto 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 usar para ver cómo afecta las cosas.

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

<div class="tags">
  <ul>
    <li>PHP</li>
    <li>JavaScript</li>
    <li>Rust</li>
    <li>Objective-C</li>
  </ul>
</div>

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

Solución 1: agregue uno de los caracteres de ruptura

Podemos seguir forzando saltos de línea con esos personajes de ruptura como acabamos de hacer. Pero recuerde, si está usando un minificador, agregar los 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 class="tags">
  <ul>
    <li>PHP </li>
    <li>JavaScript </li>
    <li>Rust </li>
    <li>Objective-C </li>
  </ul>
</div>

Solución 2: usa pseudo-elementos

El carácter de ruptura también se puede agregar usando el ::before y ::after pseudo-elementos en CSS. Lo 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 para usar ::after y 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 de 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 tiempo de renderizado. Es decir, a menos que la propiedad de espacio en blanco esté establecida en pre.

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

Quizás haya tenido una pelea con el espacio entre los elementos de bloques en línea en CSS antes. Podemos usar el valor de bloque en línea en la propiedad de visualización para forzar un salto de línea porque el elemento de 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 usar flex-flow para establecer la dirección de la lista y asegurarse de que tenga varias líneas cuando sea necesario.

También podemos recurrir a display: inline-flex en vez de inline-block solución. 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 para el caso, son inteligentes e intentarán evitar que suceda este problema de ruptura de líneas.

Claro, no es una situación extremadamente común con la que tropezar. Es realmente una de esas cosas que pueden pasar desapercibidas si no prestamos atención pero, si sucede, al menos sabemos que hay formas de evitarlo.