
How to Hide Text in a Logo Using CSS
June 7, 2024
Next/Previous Post Navigation in WordPress
July 16, 2024
line-clamp
is a CSS property that allows you to truncating multiline text (cut off text) within an HTML element to a certain number of lines. It’s perfect for when you want to show only a part of long text, like titles, product descriptions or article excerpts, while keeping readability and looks.
HTML
<div class="sf-line-clamp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
CSS for Truncating multiline text
.sf-line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
/* You can control the number of lines using media queries */
@media only screen and (max-width: 480px) {
.sf-line-clamp {
-webkit-line-clamp: 2;
}
}
See also
- Using the currentColor property to change SVG color
- Utilizing min(), max(), and clamp() in CSS
- CSS text-wrap: balance vs text-wrap: pretty
- Unordered and Ordered Lists with Auto-Increment Using Pseudoclasses
- Custom CSS Text Selection Color
Result
See the Pen Truncating multiline text with line-clamp by Snippflow (@snippflow) on CodePen.