Truncating Text with CSS

Shortening long titles, names and paragraphs with an ellipsis on one line or several, without losing the full text for readers or search engines.

Content tagged text-truncation

• Tutorial:Colouring a CSS text-overflow Ellipsis Separately from Its Text

  Give truncated text's ellipsis a colour of its own.

  Change the colour of a CSS text-overflow: ellipsis without faking it — the dots take their styles from the truncating container, so an inline span can colour the text separately. Covers the truncation basics, flex and grid items, multi-line line-clamp, detecting truncation in JavaScript, accessibility and common pitfalls.