Truncating long text

A long title in a narrow card wraps onto two or three lines, so the cards end up at different heights and the row looks uneven. The usual fix is to cut the title short and put an ellipsis … where the cut-off part was.

Truncating a single line takes three properties together: white-space: nowrap keeps the text from wrapping onto a new line, overflow: hidden hides whatever doesn't fit, and text-overflow: ellipsis adds the ellipsis. The trap is writing only the third one and seeing nothing happen, because the ellipsis only appears on text that really is longer than its box and has its overflow hidden.

To cut text off after several lines, use -webkit-line-clamp with display: -webkit-box and -webkit-box-orient: vertical. The -webkit- prefix is old, but every browser supports it. Truncation only changes what the eye sees: the full text stays in the page for screen readers and search engines.