Have you ever had trouble creating multiple line breaks?
Here is a cool CSS hack that cuts your text smartly.
Simply add few lines of CSS to implement multiline truncation with ellipsis.
Here’s what you need:
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;This CSS class will limit text content to three lines and hide the rest cut off content.
To break it down:
- display: -webkit-box = creates a flexible block container, similar to flexbox
- webkit-line-clamp = limits the number of visible lines.
- webkit-box-orient = ensures the content flows vertically.
- overflow: hidden = keeps things clean by hiding the rest of the text.
The result? Cut-off text that does not end colons. It’s ideal for cards, previews or anywhere space is tight.
The best part? It has more than 96% browser support!
Checkout the codepen: https://codepen.io/theosoti/pen/GgKJrwq
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!