How to Hide Text in a Logo Using CSS
How to Hide Text in a Logo Using CSS
June 7, 2024
Next/Previous Post Navigation in WordPress
Next/Previous Post Navigation in WordPress
July 16, 2024

June 19, 2024

Truncating multiline text with line-clamp

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

Result

See the Pen Truncating multiline text with line-clamp by Snippflow (@snippflow) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *

Level Up Your Coding Skills

Get the best CSS, HTML, and JS snippets delivered to your inbox monthly. 🚀
No spam—just coding gold! 💻✨"

We don’t spam! Read our privacy policy for more info.

cookie
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more