Limit Text to N Lines with CSS

To limit text to a set number of lines in CSS, use -webkit-line-clamp. The text is cut after the last allowed line and an ellipsis (…) is added, which keeps card excerpts, product titles and descriptions the same height.

This is a CSS-only fix. The full text stays in the HTML, so screen readers and search engines still get all of it.

CSS to Limit Text to N Lines

Add this to your stylesheet (in WordPress, the child theme’s style.css or Appearance > Customize > Additional CSS) and change the number to the lines you want to show:

.text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* number of lines to show */
    overflow: hidden;
}

Example markup:

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod.
</div>

How line-clamp Works

The three prefixed properties only work together. -webkit-line-clamp has no effect unless the element also has display: -webkit-box (or -webkit-inline-box) and -webkit-box-orient: vertical.

• -webkit-line-clamp: 2 sets the maximum number of lines and draws the ellipsis at the end of the last one.
• overflow: hidden hides the lines after the limit. Without it, the ellipsis appears but the remaining text is still visible.
• text-overflow: ellipsis is not needed for the multi-line version. The ellipsis comes from the line clamp itself.

The prefix looks old, but it is the version that works. -webkit-line-clamp is supported in Chrome, Edge, Safari and Firefox (since Firefox 68), and MDN notes this combination of properties will continue to be supported.

The unprefixed line-clamp property exists in the CSS specification, but as of 2026 no stable browser release supports it. It is only available in preview builds or behind flags, so don’t use it on its own yet.

Limit Text to One Line with an Ellipsis

For a single line you don’t need line clamping. The classic text-overflow approach works in every browser:

.text-one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

text-overflow does not create the overflow by itself. The text must be forced onto one line with white-space: nowrap, and the element needs a limited width (a block element, or an inline-block with a set width).

Common Problems

If the clamp doesn’t behave as expected, check these first:

• The next line peeks out at the bottom. Vertical padding on the clamped element shows part of the hidden line, because overflow: hidden clips at the padding edge. Move the padding to a wrapper.
• Nothing is clamped. Another rule is overriding display, for example a display: flex or display: block from the theme.
• You need a character limit, not a line limit. CSS can’t count characters. Trim the text on the server instead: mb_strimwidth() in PHP cuts a string to a set width, and wp_trim_words() in WordPress cuts it to a number of words.

Line clamping pairs well with text-wrap: balance and pretty for headings on cards. For more CSS optimization tips, see Optimize CSS for Better Performance.

FAQs

Common questions about limiting lines of text with CSS: