Skip to content
GreenSnippets

Truncate text with an ellipsis (single and multi-line)

Clip long text to one line or N lines with an ellipsis using text-overflow and line-clamp.

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

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

.flex-child {
  min-width: 0;
}

How it works

Single line needs three properties together. For several lines use line-clamp, which is now supported in current browsers (the -webkit- prefixed form below also works in older ones). Truncated text hides information, so put the full text in a title attribute or make it expandable.

Inside a flex child, add min-width: 0 or the element will refuse to shrink below its content width.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets