Wednesday, May 6, 2015

Multiline text trimming with CSS

For some reason I have not found decent CSS only solution for multiline text trimming. Here is a simple and universal solution for current browsers. The height could be set to any you like, just remember to fit whole lines. Partially cut line will not have ellipsis shown properly.

Edit text and watch how the end of this text is trimmed. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Edit text and watch how the end of this text is trimmed. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Live sample

Idea by www.mobify.com/blog/multiline-ellipsis-in-pure-css

No comments:

Post a Comment