Haz cortes limpios de tu texto con estos trucos de CSS
El desbordamiento de texto arruina interfaces limpias. Demasiado contenido se sale de su contenedor, ensucia el layout y rompe la estética profesional. Afortunadamente hay trucos CSS sencillos para controlar el flujo del texto y mantener diseños claros y consistentes.
Solución rápida para una sola línea: truncado con puntos. Para titulares o captions ajustados basta con una regla CSS que evita el salto de línea y muestra puntos suspensivos al final. Ejemplo:
.single-line-truncate { width : 300px ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }<div class=single-line-truncate> Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>Funciona perfecto para una sola línea: corta con puntos y evita el wrapping. Si necesitas controlar varias líneas, hay otra técnica.
Control multi-línea: line-clamp en WebKit. Cuando quieres limitar el texto a N líneas, -webkit-line-clamp es muy útil. Así se aplica:
.multi-line-truncate { width : 300px ; display : -webkit-box ; -webkit-line-clamp : 3 ; -webkit-box-orient : vertical ; overflow : hidden ; text-overflow : ellipsis ; }<div class=multi-line-truncate> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>La propiedad -webkit-line-clamp limita el texto a un número de líneas definido. Advertencia: es una solución dependiente de WebKit, así que conviene probar en navegadores antiguos.
Respaldo para navegadores sin soporte WebKit. Si no hay soporte, simulamos un truncado controlando la altura máxima según la line-height y la cantidad de líneas deseadas. No aparecerán puntos suspensivos, pero el corte será limpio.
.fallback-truncate { width : 300px ; max-height : 4.5em ; line-height : 1.5em ; overflow : hidden ; }<div class=fallback-truncate> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>Combina estas técnicas para ofrecer una experiencia de usuario nítida y consistente en distintos navegadores y dispositivos. Ajusta width, line-height y line-clamp según el diseño y el responsive del proyecto.
En Q2BSTUDIO aplicamos estas buenas prácticas de front-end como parte de proyectos más amplios de desarrollo de aplicaciones y software a medida. Somos una empresa especializada en desarrollo de software, aplicaciones a medida, inteligencia artificial, ciberseguridad y servicios cloud aws y azure, y combinamos experiencia en interfaces con soluciones de backend y seguridad para entregar productos robustos.
Si tu proyecto necesita una interfaz pulida y un comportamiento de texto perfecto en todo tipo de pantallas, podemos ayudarte con el desarrollo y la integración. Conoce nuestro enfoque en desarrollo de aplicaciones y software a medida en desarrollo de aplicaciones y software a medida y explora cómo aplicamos inteligencia artificial en productos empresariales en servicios de inteligencia artificial para empresas. Palabras clave que describen nuestro alcance: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.
Conclusión: controla el texto con reglas simples y piensa siempre en un fallback. Unos pocos estilos bien pensados elevan la percepción del producto y mejoran la usabilidad. Si quieres, en Q2BSTUDIO diseñamos y desarrollamos la solución completa, desde el pixel hasta la nube.