How to make truncate text in CSS

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

There is no native CSS property for truncating text. However, you can use the ellipsis character to display truncated text.

p {
  max-width: 800px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Note we have given the element a fixed width. This is made because the element needs a certain width.

Why it takes all three lines #

text-overflow doesn’t make text overflow. It only decides what to show at the point where the text gets cut (MDN: text-overflow). The other two lines create that cut: white-space: nowrap keeps the text on one line, and overflow: hidden clips what sticks out. Drop either of them and the ellipsis never appears.

The width can come from the element itself, as with max-width above, or from its parent. What matters is that something limits it. The property also only works on block containers, so a <span> needs display: block or display: inline-block first.

The flexbox trap #

A common case where the ellipsis refuses to show up is text inside a flex item:

<div class="row">
  <div class="title">
    <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
  </div>
</div>

.row {
  display: flex;
  width: 200px;
}

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

By default a flex item won’t shrink below the width of its content. So .title stays as wide as its text, wider than the 200px row, and the paragraph has nothing to cut and shows no ellipsis. One line fixes it:

.title {
  min-width: 0;
}

With that, .title stays at 200px and the text ends in “…”.

Truncating after several lines #

For a preview that shows, say, three lines and then an ellipsis, use line clamping:

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Three lines at a 20px line height make the paragraph exactly 60px tall in Chrome. The prefixed form works in Chrome, Firefox and Safari. The unprefixed line-clamp isn’t in their stable releases yet (MDN: line-clamp), so keep the -webkit- version for now.