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
To learn more tips about CSS, make sure to join my newsletter below ❤️