En el desarrollo web, la experiencia del usuario (UX) es fundamental. Uno de los desafíos comunes que enfrentamos es cómo manejar el texto que no cabe en su contenedor. Aquí es donde entra en juego la propiedad CSS text-overflow, que nos permite truncar el texto y agregar una elipsis para indicar que hay más contenido. En este artículo, aprenderás cómo usar ellipsis CSS para mejorar la UX en tu sitio web.
¿Qué es ellipsis CSS?
La propiedad text-overflow de CSS se utiliza para controlar cómo se muestra el contenido que desborda su contenedor. Una de las opciones más comunes y útiles es ellipsis, que agrega puntos suspensivos (...) al final del texto desbordado.
Sintaxis básica
Para usar ellipsis CSS, necesitas configurar algunas propiedades adicionales:
p {
white-space: nowrap; /* Evita que el texto se divida en varias líneas */
overflow: hidden; /* Oculta el desbordamiento del texto */
text-overflow: ellipsis; /* Agrega puntos suspensivos al final del texto truncado */
}Mejorando la UX con ellipsis CSS
Propiedades necesarias
Para que la propiedad text-overflow: ellipsis funcione correctamente, necesitas establecer las propiedades white-space y overflow. Estas propiedades aseguran que el texto no se divida en varias líneas y que el contenido desbordado se oculte.
.container {
width: 200px; /* Ajusta el ancho del contenedor */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Ejemplo práctico
Vamos a ver un ejemplo práctico de cómo aplicar ellipsis CSS a un párrafo:
<div class="container">
<p>Este es un ejemplo de cómo el texto puede ser truncado usando ellipsis CSS.</p>
</div>.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}En este ejemplo, el texto se truncará y se mostrarán puntos suspensivos al final si no cabe en el contenedor de 200 píxeles de ancho.
Valores adicionales de text-overflow
Además de ellipsis, la propiedad text-overflow admite otros valores como clip y la posibilidad de usar cadenas personalizadas (experimental).
Clip
El valor clip simplemente corta el texto sin añadir ningún indicador visual:
.container-clip {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}Cadena personalizada
Aunque no es ampliamente compatible, puedes usar una cadena personalizada para indicar el desbordamiento del texto:
.container-string {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: " [más]";
}Mejores prácticas para usar ellipsis CSS
Asegurar la accesibilidad
Cuando uses ellipsis CSS, asegúrate de que el contenido truncado sea accesible de alguna manera. Puedes proporcionar una descripción completa del texto truncado utilizando atributos en CSS, como el title, o elementos adicionales como aria-label.
<p title="Este es un ejemplo de cómo el texto puede ser truncado usando ellipsis CSS.">Este es un ejemplo de cómo el texto puede ser truncado usando ellipsis CSS.</p>Usar elementos de contenedor adecuados
Aplica ellipsis CSS a elementos de contenedor adecuados, como <div> o <p>, que tienen un ancho definido. Esto garantiza que el comportamiento de truncado funcione correctamente.
Responder al diseño
Asegúrate de que tu diseño sea responsivo. Ajusta el ancho de los contenedores en función del tamaño de la pantalla para que el truncado de texto no afecte negativamente la UX en dispositivos móviles.
Trucos y técnicas avanzadas
Truncado en múltiples líneas (experimental)
Aunque text-overflow: ellipsis; solo funciona para una sola línea de texto, hay técnicas avanzadas con JavaScript y CSS para truncar texto en múltiples líneas. Sin embargo, estas técnicas pueden ser complicadas y no siempre son necesarias.
Truncado dinámico con JavaScript
Puedes usar JavaScript para aplicar truncado dinámico basado en la longitud del texto y el tamaño del contenedor con algunos selectores básicos en CSS:
function truncateText(selector, maxLength) {
const element = document.querySelector(selector);
if (element.textContent.length > maxLength) {
element.textContent = element.textContent.slice(0, maxLength) + '...';
}
}
truncateText('.container', 50);El uso de ellipsis CSS es una técnica simple pero efectiva para mejorar la UX en tus sitios web. Permite manejar de manera elegante el texto que no cabe en su contenedor, asegurando que la información importante se mantenga visible y accesible para los usuarios.
Si quieres aprender más sobre técnicas avanzadas de CSS, clases en CSS y cómo mejorar la experiencia del usuario en tus proyectos web, ¡únete al Bootcamp en diseño UX/UI AI driven de KeepCoding! Nuestro programa te preparará para una carrera exitosa en el sector tecnológico, donde la demanda de profesionales es alta y las oportunidades laborales son excelentes. Al finalizar el Bootcamp, estarás listo para enfrentar los desafíos del desarrollo web y transformar tu vida profesional. ¡No esperes más y da el primer paso hacia tu futuro en tecnología!
