Text Overflow Ellipsis based on lines (Line Clamping)

#

Contents

Sometimes we encounter text that is dynamically generated, hence we don’t know the length of it beforehand. We need to clamp it, or truncate it after a set number of lines. Would it be nice to be able to do it with css only? What If we actually could?

It’s actually possible and well supported even though relies on a webkit prefix. In the future we will get line-clamp which will make things even easier, but for now you can use the snippet below.

.clamp-second-line {
	display: -webkit-box; /* You need this, it's an old version of display: flex; */	
	margin: 0 auto;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	height: 2em;/* Fallback for non-webkit (for perfect result put your line height in em's multiplied by the numer of lines) */
}
Mike Kuczek

Mike Kuczek

WordPress developer, designer, psychology student and bluberry farmer. CEO of Biiird Studio.
❤ SHARE, THANK YOU ❤
Share on facebook
Share on twitter
Share on linkedin
Share on email

Improve performance of WP_Query

Using these three arguments as an addition to your’s can speed up the query process. Check the comments to be sure you can use them.

[wbcr_php_snippet id="820"]

Leave a Comment

Your email address will not be published. Required fields are marked *

Zasób 1

Switch to Polish: 

Ta strona korzysta z plików cookie, korzystając z niej zgadzasz się na ich wykorzystanie. Więcej informacji.