Truncate text after one line with an ellipsis

by Rob O'Leary on

The Codepen UI lists pens as cards. the title of the first card is truncated with an ellipsis.

Sometimes you want to restrict the dimensions of a text block to perserve a consistent layout. The most commmon incarnation of this is a card component with the title on a single line. When the title is too long, it is truncated (cut short). An ellipsis can be added to the end to signify the truncation.

CSS
.truncate-one-line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Another place that you see this utilised is page headers. On mobile screens space is limited and cannot accomodate a long title.

On codepen, the preview pages have a header that contains the title and many buttons. On mobile screens, the title is often too long and is truncated. In this case the title is: 'Chocolate wafer...'

Demo

Explanation

We confine the text block to a single line through white-space: nowrap;. To truncate overflowing text, overflow: hidden; is used. If you use these two together, the text abruptly ends. There is no hint to the reader that there is additional content. That is where the text-overflow property comes in. It sets how hidden content is signaled to users. The ellipsis value appends an ellipsis to text that is truncated.