Desbordamiento de texto: Puntos suspensivos considerados dañinos

Reeditado por Platón

seguidores: 0

Hay algunos casos de uso legítimos para esta técnica. Por ejemplo, podría tener una tabla con títulos y descripciones. Para conservar más espacio para el título, restringe la descripción a una línea en ventanas de visualización pequeñas a la línea única y repite la descripción en la página de detalles para este elemento.

Sin embargo, a menudo veo que se usa en elementos como botones o incluso etiquetas de formularios para que se vean mejor (?) O al alinearlos verticalmente. Pero una vez que cambia la ventana gráfica o cambia el tamaño del texto, el final del texto desaparece.

Creo que "... si se usa en ciertas situaciones" pertenece allí, pero ciertamente es un mejor título de publicación de blog sin él. Como dice Eric, existen casos de uso legítimos para truncar texto. Tal vez solo unos pocos, pero legítimos, no obstante.

El objetivo final es evitar la “pérdida” de datos, algo eso ciertamente puede suceder en CSS. El texto que inadvertidamente desborda un contenedor se pierde en el sentido de que simplemente no está allí. Y si ese texto simplemente no está allí, los usuarios lo extrañarán, incluso si es la mejor y más elaborada llamada a la acción jamás publicada en la web.

Eric señala que no hay manera de hacer que el texto sea truncado por text-overflow: ellipsis visible. Una vez que se ha ido, se ha ido (aunque los lectores de pantalla parecen anunciarlo). Prácticamente son datos perdidos. Puede que estés de acuerdo con eso. Eso es genial siempre y cuando sepas lo que está pasando y lo que se pretende.

Pero esto es lo que dice Eric que me hizo querer compartir esto:

No restrinja el contenido para que se ajuste a su diseño, haga que su CSS sea flexible para manejar palabras más largas con gracia.

Otra vez tu podría desea ajustar el contenido al diseño. Pero probablemente argumentaría, como Eric, que el el diseño debe adaptarse al contenido en lugar de al revés. Me cuesta mucho recordar cualquier situación en la que el texto de una página no sea importante o no tenga un propósito en la medida en que estaría bien cortarlo en cualquier punto arbitrario determinado por una propiedad CSS. Tal vez un archivo de publicaciones de blog donde cada publicación muestra un extracto del contenido de la publicación antes de truncarla, pero ese no es exactamente un caso de uso para text-overflow: ellipse.

CSS tiene las herramientas para hacer un diseño flexible que tenga en cuenta las diferentes longitudes de texto. Así que tal vez errar por el lado de escribir CSS defensivo… CSS que se anticipa a los problemas y sabe cómo manejar con gracia diferentes escenarios de contenido. text-overflow: ellipsis podría ser parte de tu arsenal de CSS para eso. Pero también podría ser tirar al bebé con el agua del baño. Vale la pena preguntarse si perder esos datos vale el costo de lo que se supone que debe hacer ese contenido antes de darle un corte de pelo.

Mientras hablamos de truncar texto...

Enlace el oct 1, 2021