text-overflow: ellipsis
An ellipsis is three declarations, not one
Caveattext-overflow: ellipsis is a passenger: on its own it does nothing, because it only describes how to paint text that is already being clipped. The clipping takes overflow: hidden and the single line takes white-space: nowrap — lose either and the name above just walks out of its box. In a flex or grid row there is a fourth wall: the item’s automatic minimum size refuses to shrink below the text, so the box grows instead of truncating — and conveniently, the same overflow: hidden that enables the ellipsis also zeroes that minimum. One declaration, both jobs. It is strictly one line; for two or three, that is -webkit-line-clamp, a different element on this site.
FallbackSupported since engines had names, so there is nothing to wait for. The variant that is not portable is the string form — text-overflow: "… more" — which only Firefox ever shipped; everyone else drops the declaration and keeps clipping. And remember the ellipsis is paint, not content: the full name is still there for copy, find-in-page and screen readers, which is exactly why truncating is kinder than slicing the string server-side.
.filename {
white-space: nowrap;
text-overflow: ellipsis;
/* the working half: clips, and
in a flex row also zeroes the
min-width that blocks shrink */
overflow: hidden;
}Published