Habilita el ajuste de texto optimizado para lograr belleza sobre la velocidad.
A partir de Chrome 117, puedes usar una nueva función de ajuste de texto: text-wrap: pretty
del nivel de texto de CSS 4.
p {
text-wrap: pretty;
}
Las viudas y huérfanas tipográficas son palabras únicas que se separan por sí solas al final de un párrafo o bloque de texto. Las viudas son palabras solas en la parte superior de un bloque de texto y los huérfanos aparecen solos al final del bloque de texto. Pueden interrumpir la manera en que nuestros ojos leen el texto, lo que hace que el contenido sea más difícil de leer. Algunos diseñadores los evitan a toda costa y hacen todo lo posible para evitarlos.
A partir de Chrome 117, se pueden evitar los huérfanos con una línea de CSS: text-wrap: pretty
.
Esta función no solo garantiza que los párrafos no terminen con una sola palabra, sino que también ajusta la separación silábica si aparecen líneas consecutivas al final de un párrafo o ajusta las líneas anteriores para liberar espacio. También se ajustará de forma
adecuada para justificar el texto. text-wrap: pretty
es, en general, mejor ajuste de línea y salto de texto, que actualmente se enfoca en huérfanos.
En el futuro, es posible que text-wrap: pretty
ofrezca más mejoras.
![Una comparación de un párrafo con huérfanos y otro sin huérfanos, cada uno con una insignia de buena o mala.](https://developer.chrome.com/static/blog/css-text-wrap-pretty/image/a-comparison-a-paragraph-8806ede4d3829.png?authuser=5&hl=es)
También está text-wrap: balance
, que no evita la aparición de huérfanos, pero garantiza que el texto se ajuste de una manera que cree un bloque de texto armonioso. Yo uso balance
para los títulos y pretty
para los párrafos.
Si te interesa conocer los detalles del algoritmo que se usa para determinar la cantidad óptima de líneas o las consideraciones de rendimiento, aquí hay un vínculo al documento de diseño creado por el ingeniero detrás de la función, Koji Ishii.
Si tienes otras mejoras o sugerencias para romper las líneas, nos encantaría escucharlas. Informa un problema en el registro de errores de Chromium con detalles y ejemplos de saltos de línea correctos y incorrectos, y nos comunicaremos contigo.