← #88 Save a few bytes when checking the existence of module
#89

Truncate long text

Topics: CSS

I'm pretty sure that it's one of well-known CSS snippets to truncate long text:

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

However, it truncates the origin text to a single line. If you want to truncate to a given number of lines, then the -webkit-line-clamp property comes in handy.

The CSS declaration below limits the number of lines to 3:

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

Note that the -webkit-line-clamp property only works when we have display: -webkit-box and -webkit-box-orient: vertical declarations.

Demo

This is a multiple lines paragraph. The content will be truncated to 2 lines
Fix a typo or suggest an improvement
#90 View a file in a different branch without switching the branch