Consigna y contexto
Un sitio de contenido internacional tiene encabezados de tarjetas que dejan una sola palabra en una línea estrecha, mientras que los párrafos largos a menudo terminan con una palabra huérfana. El equipo de diseño desea una solución CSS de una sola línea, pero la página también debe admitir edición, navegadores antiguos y fuentes dinámicas. Compara text-wrap: balance, text-wrap: pretty, el wrap normal y stable, y luego propone un plan de despliegue.
Esta pregunta es adecuada para entrevistas de frontend, sistemas de diseño y plataformas de contenido. La clave es tratar el ajuste de línea (wrapping) como un comportamiento de diseño en lugar de un ancho fijo o el resultado de una medición con JavaScript.
Qué evalúa el entrevistador
Una respuesta sólida utiliza balance para encabezados cortos y citas, considera pretty para textos más largos reconociendo su mayor costo de cálculo, y explica que ninguno de los dos valores cambia el tamaño en línea (inline size) de un elemento ni anula white-space: nowrap. También cubre stable para contenteditable, pruebas multilingües, fallbacks estáticos y accesibilidad.
Preguntas de clarificación iniciales
- ¿El texto es un encabezado, un resumen de tarjeta, cuerpo de texto o un campo editable, y cuántas líneas se esperan?
- ¿Buscamos prevenir palabras huérfanas o intentar que la longitud de las líneas se vea más uniforme?
- ¿Los estilos del contenedor incluyen
white-space, una altura fija, recorte (clipping) oline-clamp? - ¿Qué idiomas, estados de carga de fuentes y versiones de navegadores están dentro del alcance?
- ¿Los navegadores heredados deben preservar exactamente los mismos saltos, o el ajuste normal es un fallback aceptable?
Estructura de respuesta en 30 segundos
“Elegiría según el tipo de contenido: text-wrap: balance para encabezados cortos, evaluar pretty para prosa solo cuando el control de huérfanas sea importante, mantener el contenido común en wrap y considerar stable para áreas editables. Estos valores modifican el ajuste de línea suave (soft wrapping), no el ancho del elemento; white-space: nowrap, las alturas fijas y el recorte aún requieren decisiones independientes. Mantendría un valor predeterminado legible, mejoraría la experiencia en navegadores compatibles y probaría idiomas, fuentes, tamaños responsivos y el comportamiento de edición tanto a nivel visual como de rendimiento”.
Respuesta detallada paso a paso
Paso 1: Separar las cuatro estrategias
wrap sigue las reglas normales de salto de línea, mientras que nowrap deshabilita el ajuste suave. balance busca longitudes de línea más uniformes para textos cortos como encabezados y citas. pretty utiliza un algoritmo más lento para mejorar textos más largos y reducir huérfanas. stable apunta a contenteditable, manteniendo las líneas anteriores más estables mientras el usuario edita.
Paso 2: Dar a los encabezados un límite controlable
El balanceo necesita oportunidades reales de salto de línea. Define un max-inline-size o un ancho de contenedor razonable antes de aplicar text-wrap: balance; una cadena de una sola línea no tiene nada que balancear. Evita los saltos manuales con <br> en inglés o chino, ya que las traducciones, las fuentes y el ancho del viewport alteran el resultado.
.card-title {
max-inline-size: 24ch;
text-wrap: balance;
}Paso 3: Usar pretty de forma deliberada
pretty es adecuado para el cuerpo de texto, explicaciones y citas más largas, pero requiere más cómputo que el ajuste de línea común. Utilízalo donde la calidad del texto justifique el costo y evita un selector universal. Para encabezados de una o dos líneas, balance es la opción más directa.
Paso 4: Resolver conflictos con white-space y clipping
white-space: nowrap solicita explícitamente no realizar ajustes de línea, lo que entra en conflicto con el balanceo. Elimínalo o anúlalo antes de esperar líneas balanceadas. Las alturas fijas, overflow: hidden y line-clamp todavía pueden recortar el texto, por lo que el producto debe decidir si crecer, mostrar puntos suspensivos o exponer el texto completo.
Paso 5: Comprender el límite de rendimiento
El navegador prueba múltiples soluciones de salto de línea. La documentación de MDN y Chrome recomienda mantener balance en textos cortos y considerar pretty para prosa más larga; no afirmes que alguno de ellos sea siempre más rápido que JavaScript. Mide el layout, la carga de fuentes y el renderizado de listas largas en dispositivos reales.
Paso 6: Cubrir idiomas y cambios de fuentes
El mismo encabezado tiene diferentes oportunidades de salto en chino, inglés, alemán y árabe. Prueba cambios de idioma, fuentes de fallback, zoom, pantallas estrechas y pantallas anchas. El contrato debe ser: sin desbordamiento, jerarquía legible y contenido completo, no una captura de línea idéntica para un solo idioma.
Paso 7: Elegir stable para contenido editable
Cuando un usuario edita en medio de un contenteditable, el reflujo puede mover las líneas cercanas al cursor. text-wrap: stable puede mantener más estables las líneas anteriores a la edición, pero no es una estrategia de embellecimiento de encabezados ni gestiona la altura del campo. Úsalo solo donde la estabilidad de edición sea el problema real.
Paso 8: Diseñar mejora progresiva y verificación
Comienza con un wrap ordinario y una altura que pueda crecer; añade balance o pretty donde haya soporte. Aplica la mejora de forma escalonada con CSS consciente de capacidades y mantén el contenido crítico utilizable sin ella. Verifica estilos computados, desbordamientos, CLS, el costo en listas largas, las rutas de fuentes y el orden para lectores de pantalla.
Compensaciones y límites
balance mejora el ritmo visual del texto corto pero no encoge el elemento; los bordes de la tarjeta, las sombras y la alineación siguen dependiendo del contenedor. pretty puede mejorar la prosa a costa de agregar trabajo de layout. Ninguno reemplaza las decisiones editoriales, las reglas de salto de línea, overflow-wrap o una expansión accesible a texto completo.
No tomes el soporte actual del navegador como una garantía permanente. CSS Text Level 4 todavía presenta diferencias de implementación, por lo que debes probar en la matriz de navegadores de tu producto. Mantén una ruta con ajuste normal para encabezados críticos y proporciona un nombre accesible o una expansión para el contenido recortado.
Plan de despliegue y evidencia
Haz una prueba piloto con un componente de encabezado, resumen y cuerpo de texto. Registra el idioma, el número máximo de líneas, el tamaño del contenedor y el estado de las fuentes. Usa balance para el encabezado, prueba pretty solo cuando el problema de huérfanas sea reproducible y evalúa stable por separado en el editor. Revisa el desbordamiento, el cambio de diseño (layout shift) y la estabilidad del cursor en Chromium, Firefox, Safari y los navegadores heredados requeridos.
Documenta el tipo de contenido, el número máximo de líneas, los prerrequisitos de white-space, los estilos de fallback y las métricas de medición. Ejecuta pruebas de regresión visual siempre que cambien las fuentes, los anchos de contenedor o las traducciones, para que una sola captura no oculte regresiones de saltos de línea multilingües.
Errores comunes y preguntas de seguimiento
Aplicar balance a todos los elementos
El uso global desperdicia capacidad de cómputo y no mejora la prosa larga. Limítalo a encabezados, citas y textos cortos que se beneficien del balanceo.
Asumir que balance cambia el ancho del elemento
Solo cambia el ajuste de línea suave; no ajusta el tamaño de la caja al contenido (shrink-wrap). El layout y max-inline-size siguen controlando el tamaño en línea de la tarjeta.
Ignorar nowrap o alturas fijas
Esas reglas pueden hacer que el texto se desborde o se recorte. Inspecciona los estilos computados antes de decidir si se permiten el ajuste de línea y el crecimiento en altura.
Tratar pretty como una solución gratuita para palabras huérfanas
Un mejor ajuste de línea requiere trabajo adicional. Mide el rendimiento en listas largas y dispositivos de gama baja en lugar de confiar en una sola demo.
¿Por qué no usar balance en una región editable?
El reflujo durante la edición puede mover el área del cursor. Evalúa stable para la estabilidad de edición y reserva balance para encabezados de presentación de solo lectura.