Truncate text

CSS, Layout · Dec 30, 2020

Truncates text that is longer than one line, adding an ellipsis at the end (…).

  • Use overflow: hidden to prevent the text from overflowing its dimensions.
  • Use white-space: nowrap to prevent the text from exceeding one line in height.
  • Use text-overflow: ellipsis to make it so that if the text exceeds its dimensions, it will end with an ellipsis.
  • Specify a fixed width for the element to know when to display an ellipsis.
  • Only works for single line elements.
Preview

If I exceed one line's width, I will be truncated.

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

More like this

  • Truncate multiline text

    Truncates text that is longer than one line.

    CSS, Layout · Jan 7, 2021

  • 3-tile layout

    Aligns items horizontally using display: inline-block to create a 3-tile layout.

    CSS, Layout · Dec 30, 2020

  • Trim multiline text

    Limit multiline text to a given number of lines.

    CSS, Layout · May 16, 2021