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
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;
}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;
}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;
}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;
}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;
}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 Mobile, Opera 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;
}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;
}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;
}NUEVO: Text-wrap: Balance
text-wrap: balanceEs una técnica tipográfica clásica de saltos de línea de creación manual para bloques de texto equilibrados.
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.