Desbordamiento de texto: los puntos suspensivos se consideran dañinos | trucos CSS
Hay varios casos de uso legítimos para esta técnica. Por ejemplo, puede tener una tabla de títulos y descripciones. Para ahorrar más espacio para el título, limite la descripción a una línea de pequeñas ventanas gráficas en una sola línea y repita la descripción en la página de detalles de este artículo.
Sin embargo, a menudo lo veo usado en elementos como botones o incluso etiquetas de formularios para que se vean mejor (?) o al alinearlos verticalmente. Pero después de cambiar la ventana gráfica o cambiar el tamaño del texto, el final del texto desaparece.
Creo que "... si se usa en ciertas situaciones" pertenece allí, pero ciertamente hace un mejor título de publicación de blog sin él. Como dice Eric, hay casos de uso legítimos para acortar texto. Tal vez solo unos pocos, pero aún son legales.
El objetivo final es evitar que los datos se "pierdan", algo que sin duda puede suceder en CSS. El texto que desborda inadvertidamente un contenedor se pierde en el sentido de que simplemente no está allí. Y si ese texto simplemente no está allí, los usuarios te lo pierdas incluso si es el mejor y mejor llamado a la acción jamás publicado en la web.
Eric señala que no hay forma de que el texto se pueda abreviar con text-overflow: ellipsis visible. Cuando se ha ido, se ha ido (aunque los lectores de pantalla parecen informarlo). Esto es prácticamente datos perdidos. Puedes manejarlo. Eso es genial, siempre y cuando sepas lo que está pasando y lo que está destinado a ser.
Pero esto es lo que dijo Eric que me hizo querer compartir esto:
No limite el contenido para que se ajuste a su diseño, haga que su CSS sea flexible para manejar con elegancia palabras más largas.
Tú otra vez podría, podría Quiero hacer coincidir el contenido con el diseño. Pero probablemente diría, como Eric, que el diseño debe adaptarse al contenido, no al revés. Me cuesta recordar una situación en la que el texto de una página es tan poco importante o sin propósito que lo cortaría si se desactivara en cualquier punto arbitrario especificado por una propiedad CSS. Tal vez un archivo de publicaciones de blog donde cada publicación muestre una muestra del contenido de la publicación antes del truncamiento, pero ese no es exactamente un caso de uso para text-overflow: ellipse.
CSS tiene las herramientas para crear un diseño flexible que se adapta a diferentes longitudes de texto. Así que tal vez pecar de precavido y escribir CSS seguro... CSS que anticipe problemas y sepa cómo manejar diferentes escenarios de contenido con elegancia. text-overflow: ellipsis puede ser parte de su arsenal de CSS para esto. Pero también puede tirar al bebé con el agua del baño. Vale la pena preguntarse si perder esos datos vale el costo de lo que debe hacer ese contenido antes de recortarlo.
Mientras hablamos de acortar texto...
Enlace directo →
Deja una respuesta