Saltar al contenido
CSS

Partición CSS3: break, wrap e hyphens

Partición CSS

Partición CSS se refiere a cuando una palabra o un string que apenas tiene espacios,es larga y se encuentra dentro de un DIV con unas dimensiones fijas, aparecerá que sobrepasa el elemento (como sucede en la imagen superior).

El navegador no recibe la instrucción que la palabra (en este caso en un SPAN) sobresale del DIV. Por lo tanto, hay que hacer entender al navegador que esto no suceda.

Con los siguientes códigos que te muestro a continuación para que sepas cómo hacer una partición CSS de un parráfo largo.
La partición en web es otra de las cuentas pendientes que tienen los navegadores web a la hora de estandarizar CSS. En este POST vamos a repara las diferentes técnicas de partición CSS, dándole una solución multi-navegador.

Existen diferentes propiedades, en la que vamos a presentar una por una con breves ejemplos:

Partición CSS: Word-wrap

Partición CSS

Word-wrap es la propiedad más antigua y lo sorportan todos los navegadores web. Esta propiedad fé creada por Microsoft para Internet Explorer 5.5, que posteriormente la han ido adoptando los demás navegadores web.

Overflow-wrap es la versión actual y que Microsoft no es propietaria. Word-warp ha quedado como alias y continúa siendo la única compatible con todos los navegadores. Dispone de dos atributos:

Ejemplo Word-wrap: normal

Vemos que el texto se muestra fuera de la etiqueta DIV.

div{
  word-wrap: normal;
}
El músculo esternocleidomastoideo, comúnmente abreviado ECM, es un músculo robusto situado a los lados del cuello, por debajo del músculo platisma y dentro de una vaina formada por la capa de revestimiento de la fascia cervical profunda.

Ejemplo Word-wrap: break-word

Parte las palabras que sean demasiado largas, pero sólo para evitar el overflow, por lo que no evitará los huecos en las líneas.

div{
  word-wrap: break-word;
}
El músculo esternocleidomastoideo, comúnmente abreviado ECM, es un músculo robusto situado a los lados del cuello, por debajo del músculo platisma y dentro de una vaina formada por la capa de revestimiento de la fascia cervical profunda.

Partición CSS: Word-break

Word-break funciona como Word-wrap pero se añaden dos mejoras:

  • Soporta modificaciones dinámicas del width por Javascript.
  • Y por otro aporta dos valores más: break-all y keep-all

Ejemplo Word-break: break-all

Este permite cortar palabras en cualquier carácter para evitar el overflow.

div{
  word-break: break-all;
}
El músculo esternocleidomastoideo, comúnmente abreviado ECM, es un músculo robusto situado a los lados del cuello, por debajo del músculo platisma y dentro de una vaina formada por la capa de revestimiento de la fascia cervical profunda.

Ejemplo Word-break: keep-all

Romperá las palabras por cualquier carácter excluyendo los CJK (Chino /Japonés / Coreano). Es  un valor no soportado por algunos navegadores móviles minoritarios.

div{
  word-break: keep-all;
}
El músculo esternocleidomastoideo, comúnmente abreviado ECM, es un músculo robusto situado a los lados del cuello, por debajo del músculo platisma y dentro de una vaina formada por la capa de revestimiento de la fascia cervical profunda.

Ejemplo Word-wrap: break-word

Es un valor no oficial soportado sólo por Chrome, Safari y otros navegadores Webkit/Blink, con el mismo resultado que word-wrap: break-word.

div{
  word-break: break-word;
}
El músculo esternocleidomastoideo, comúnmente abreviado ECM, es un músculo robusto situado a los lados del cuello, por debajo del músculo platisma y dentro de una vaina formada por la capa de revestimiento de la fascia cervical profunda.

Partición CSS: Hyphens

La propiedad Hyphens es la que con diferencia tiene un mejor resultado, al cortar la palabra, la propiedad agrega un guión en el corte y siguiendo las reglas de partición de cada idioma. Por ello es necesario definir el atributo lang de la etiqueta HTML para que funcione correctamente. En nuestro caso, lo ponemos en español:

<html lang="es">

Además de soportarlo en plataformas Android y Mac, también lo soporta Google Chrome en su versión 88, en la que da soporte en todos los entornos y para todos los atributos.

Otros navegadores móviles como IE MobileOpera Mobile o Blackberry no soportan la propiedad Hyphens. Internet Explorer da soporte a partir de su versión 10 y Edge usando la versión con prefijo -ms-.

Hyphens: none

div{
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
El músculo esternocleidomastoideo, comúnmente abreviado ECM, es un músculo robusto situado a los lados del cuello, por debajo del músculo platisma y dentro de una vaina formada por la capa de revestimiento de la fascia cervical profunda.

Hyphens: manual

Se puede ver en la imagen de la izquierda cómo corta a la perfección todas las palabras, incluso aquellas como «Electroencefalografista», en que Firefox falla en el intento, a pesar de tener supuestamente soporte. Sin embargo, en los testes realizados, consigue cortar correctamente «supercalifragilísticoespialidoso» añadiendo los guiones tal como hace IE en el ejemplo de la izquierda.

En defensa de Chrome hay que decir que cuando combinas los métodos, como haremos nosotros al final del artículo, aplica a cada palabra la mejor opción disponible, logrando así un resultado global más que aceptable.

div{
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
El músculo esternocleidomastoideo, comúnmente abreviado ECM, es un músculo robusto situado a los lados del cuello, por debajo del músculo platisma y dentro de una vaina formada por la capa de revestimiento de la fascia cervical profunda.

Hyphens: auto

A diferencia del manual, las palabras se separán con un guión cuando el algoritmo decida oportuno.

div{
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
El músculo esternocleidomastoideo, comúnmente abreviado ECM, es un músculo robusto situado a los lados del cuello, por debajo del músculo platisma y dentro de una vaina formada por la capa de revestimiento de la fascia cervical profunda.

Conclusión

Sabiendo que word-wrap es el único soportado por todos los navegadores y que hyphens nos aporta una mejora en cuanto a las reglas y el modo de partir las palabras, a menos que debamos enfrentarnos a un texto multi-idioma con caracteres asiáticos, podemos descartar word-break de la ecuación, llegando a la siguiente solución multi-plataforma

Si te ha gustado el POST, te recomiendo que eches un vistazo la categoría de CSS.

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.