Ajuste y balance de textos

Existen situaciones donde podemos necesitar modificar la forma en la que se renderiza el texto en los elementos contenedores de nuestra página. La forma en la que el navegador ajusta el texto para adaptarse al contenedor, no siempre es la ideal, por lo que la siguiente propiedad nos puede venir muy bien.

La propiedad text-wrap

La propiedad text-wrap nos permite ajustar el texto del elemento al que se lo aplicamos, adaptando la forma en la que se muestra el contenido. Los valores que soporta esta propiedad son los siguientes:

En general, los dos primeros valores están muy bien soportados en navegadores, sin embargo, el resto de opciones depende del navegador, y las veremos más adelante. Pero como mencionamos, los valores wrap y nowrap tienen buen soporte:

Los valores wrap y nowrap

Observa el siguiente ejemplo. Por defecto, el valor aplicado es wrap, donde el contenido se ajusta al tamaño de ancho del contenedor, al que le hemos puesto un max-width: 300px para obligar a ajustar el texto. Si pulsamos en la demo y cambiamos el valor de text-wrap a nowrap veremos que el texto se desborda:

.text-wrap {
  background: black;
  color: hotpink;
  padding: 2rem;
  max-width: 300px;
  text-wrap: wrap;
}

const textWrap = document.querySelector(".text-wrap");
const select = document.querySelector("select");

select.addEventListener("input", () => {
  const selectedOption = select.querySelector("option:checked");
  textWrap.style.textWrap = selectedOption.value;
});

<p>
  <label>
    Propiedad <code>text-wrap</code>:
    <select>
      <option selected>wrap</option>
      <option>nowrap</option>
    </select>
  </label>
</p>

<p class="text-wrap">
  Esto es un ejemplo para comprobar el comportamiento de
  la propiedad `text-wrap` usando `wrap` y `nowrap`.
</p>

En el caso del valor nowrap el texto no se ajustará al contenido, sino que se desbordará. Aunque no es lo habitual, en algunas ocasiones nos puede interesar este comportamiento.

El valor balance

El valor balance se suele utilizar en titulares y headings. Con él conseguimos que nuestros titulares, de tener múltiples líneas, sean equilibrados y eviten los tamaños de línea excesivamente pequeños o excesivamente largos.

En este ejemplo puedes cambiar el valor de text-wrap que se aplicará al titular (la zona violeta):

.container {
  max-width: 450px;
  min-width: 250px;
  background: #ccc;
  padding: 1rem;
  overflow: hidden;
  resize: horizontal;
}

h1 {
  margin: 0;
  text-wrap: wrap;
  background: indigo;
  color: white;
  padding: 0.5rem;
}

body { min-height: 500px }

const h1 = document.querySelector("h1");
const select = document.querySelector("select");

select.addEventListener("input", () => {
  const selectedOption = select.querySelector("option:checked");
  h1.style.textWrap = selectedOption.value;
});

<p>
  <label>
    Propiedad <code>text-wrap</code> en <code>h1</code>:
    <select>
      <option selected>wrap</option>
      <option>balance</option>
    </select>
  </label>
</p>

<div class="container">
  <h1>ManzDev, el streamer de CSS</h1>

  <p>
    Hay rumores de que existe un streamer que conoce
    los misterios y magia arcana de centrar con CSS.
    Aunque es probable que sean sólo rumores.
  </p>
</div>

<p>Redimensiona en la esquina derecha ⤴</p>

El soporte de este valor en los diferentes navegadores es el siguiente:

El valor pretty

Por otro lado, el valor pretty suele utilizarse en párrafos de texto, y no en titulares. En este caso, el texto se ajustará intentando que la longitud de las líneas de los párrafos sea lo más similar posible, consiguiendo un aspecto más equilibrado.

Observa el ejemplo siguiente, donde cambiamos el párrafo a este valor:

.container {
  max-width: 450px;
  min-width: 250px;
  background: #ccc;
  padding: 1rem;
  overflow: hidden;
  resize: horizontal;
}

.text-wrap {
  margin: 0;
  text-wrap: wrap;
  background: indigo;
  color: white;
  padding: 1rem;
}

body { min-height: 550px }

const textWrap = document.querySelector(".text-wrap");
const select = document.querySelector("select");

select.addEventListener("input", () => {
  const selectedOption = select.querySelector("option:checked");
  textWrap.style.textWrap = selectedOption.value;
});

<p>
  <label>
    Propiedad <code>text-wrap</code> en <code>p</code>:
    <select>
      <option selected>wrap</option>
      <option>pretty</option>
    </select>
  </label>
</p>

<div class="container">
  <h1>ManzDev, el streamer de CSS</h1>

  <p class="text-wrap">
    Hay rumores de que existe un streamer que conoce
    los misterios y magia arcana de centrar con CSS.
    Aunque es probable que sean sólo rumores.
  </p>
</div>

<p>Redimensiona en la esquina derecha ⤴</p>

Recuerda revisar el soporte de este valor en la propiedad text-wrap. En el momento de escribir este artículo el soporte en navegadores no es completo:

El valor stable

Por último, el valor stable nos permite ajustar el texto de forma que se mantengan los espacios entre palabras de forma uniforme. Esto nos permite que el texto sea más estable, algo que se suele observar, por ejemplo, cuando estamos editando una zona de texto.

Por ejemplo, si tuvieramos un fragmento de texto con el atributo contenteditable, dándo al usuario la capacidad de editar ese texto, sería una situación ideal para aplicar el valor stable:

<div class="container">
  <h1>ManzDev, el streamer de CSS</h1>

  <p class="text-wrap" contenteditable>
    Hay rumores de que existe un streamer que conoce
    los misterios y magia arcana de centrar con CSS.
    Aunque es probable que sean sólo rumores.
  </p>
</div>

Este valor aún es experimental, y tiene poco soporte en navegadores. Procede con precaución:

Ten en cuenta que la propiedad text-wrap es un atajo de las propiedades text-wrap-mode (wrap y nowrap) y text-wrap-style (resto). Sin embargo, se recomienda no utilizarlas aún a favor de text-wrap, ya que sus nombres son provisionales.