Control Your Content: CSS Tricks for Limiting Text Lines
Learn how to control the appearance of long text on your website with this CSS tutorial. In this video, we'll show you how to limit the number of text lines, add a stylish ellipsis effect, and make it responsive for different screen sizes. Perfect for creating clean and professional designs that maintain visual harmony across devices!
⚠️⚠️⚠️
I forgot to mention that it is necessary to add the class we created ("limit-text-lines") to the text element you want to limit.
----
This is the CSS code:
.limit-text-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
}
/* Tablet */
@media screen and (max-width: 1024px) {
.limit-text-lines {
-webkit-line-clamp: none;
}
}
/* Mobile */
@media screen and (max-width: 768px) {
.limit-text-lines {
-webkit-line-clamp: 3;
}
}
#wixStudio #css #ellipsis