text-overflow: the ellipsis does not shorten only the text

Useful to know

text-overflow: ellipsis; indicates how to label text that has been cut in the direction of the line. The property doesn't just cause overcrowding. For plain single-row label, a common combination is limited width , overflow: hidden; white-space: nowrap; and text-overflow: ellipsis;. [1]

For example, a long file name can fit into a narrow column as the beginning of the name and ellipsis. The full content does not change in the document just because it is visually abbreviated. Provide a way for the person to reach the full name if the difference between the files is at the end.

This technique is not a universal solution for severalline description. If the goal is a normal paragraph, first consider whether the carryover is more useful. In a table, the ellipsis can improve the arrangement, but it should not hide the only information that is decided upon.