The problem
You need to truncate long text and show an ellipsis when it overflows its container.
The solution
/* Single line truncation */
.truncate-single {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Multi-line truncation (2 lines) */
.truncate-multi {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Multi-line with custom line count */
.truncate-3-lines {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}See it live
Parameters
-webkit-line-clampnumberNumber of lines to show before truncating
Put it to work
<p class="truncate-single">
This is a very long text that will be truncated...
</p>
<p class="truncate-multi">
This paragraph will show exactly two lines of text
before being truncated with an ellipsis at the end.
</p>Worth knowing
Multi-line truncation uses webkit prefix but works in all modern browsers including Firefox.