---
title: "CSS Line Clamp: How To Truncate Text To Two Or Three Lines"
url: https://theplusaddons.com/blog/css-line-clamp/
date: 2026-11-03
modified: 2026-11-03
lang: en
author: "Aditya Sharma"
description: "A blog grid looks tidy until one author writes a three-sentence summary and the next writes a paragraph. Suddenly the cards are different heights, the buttons no longer line up,..."
image: https://theplusaddons.com/wp-content/uploads/2026/11/css-line-clamp-featured-1024x538.webp
word_count: 2165
---

# CSS Line Clamp: How To Truncate Text To Two Or Three Lines

A blog grid looks tidy until one author writes a three-sentence summary and the next writes a paragraph. Suddenly the cards are different heights, the buttons no longer line up, and the layout looks broken even though nothing is wrong with the code. The fix is to cap how much text each card shows, and CSS has a property for exactly that.

This guide explains how to truncate text to a set number of lines, which of the properties is safe to ship today, the handful of conditions that make it fail silently, and how to build a working Read more toggle. It ends with the no-code route in Elementor, including where its character and word limits differ from a line limit.

 

Table Of Contents

## Which Truncation Method Fits Which Job

There are three common ways to shorten text, and they do different things. Choosing the wrong one is the usual reason a truncation "does nothing".

| Goal | Technique | Cuts By |
| ---- | --------- | ------- |
| Keep one line, add an ellipsis | `white-space: nowrap` + `overflow: hidden` + `text-overflow: ellipsis` | Width |
| Keep two, three or more lines | `-webkit-line-clamp` with the legacy box setup | Lines |
| Keep two, three or more lines (standard) | `line-clamp` | Lines (limited availability) |
| Cut the text itself before rendering | A server or plugin limit on characters or words | Characters or words |
The first three truncate visually and leave the full text in the page. The last one actually shortens the text.

## One Line With text-overflow

For a single line, no line-clamp is needed. `text-overflow` controls how overflowing text is signalled, and its `ellipsis` value replaces the cut text with an ellipsis character. It has three requirements, all in the same rule: the text must be prevented from wrapping, the box must clip its overflow, and the box must have a width to overflow.

`.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}`

![Single line truncation with text-overflow ellipsis compared with text-overflow clip](https://theplusaddons.com/wp-content/uploads/2026/11/lc-single.webp)Left: ellipsis. Right: clip, which cuts the text with no signal that anything is missing.

Drop any one of the three lines and nothing happens: without `nowrap` the text simply wraps to a second line, and without `overflow: hidden` the text spills out of the box. The right-hand sample above shows `clip`, the default value, which cuts mid-letter and gives the reader no hint that text is missing. Prefer `ellipsis` for anything people need to read.

## Multiple Lines With -webkit-line-clamp

For two lines or more, the pattern that works in browsers today is the legacy prefixed property. MDN documents it as a legacy-support feature that only works when `display` is set to `-webkit-box` (or `-webkit-inline-box`) and `-webkit-box-orient` is set to `vertical`. In practice you also add `overflow: hidden` to hide the lines past the limit.

`.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}`

![The same paragraph clamped to one, two and three lines with webkit-line-clamp](https://theplusaddons.com/wp-content/uploads/2026/11/lc-lines.webp)The same paragraph at `-webkit-line-clamp` values of 1, 2 and 3.

Change the number and the paragraph shows that many lines, ending in an ellipsis on the last visible one. The count is in lines, not characters, so on a narrow screen where each line holds fewer words, the same rule shows less text. That is usually what you want: the box height stays predictable even though the amount of text does not.

***Also Read:** [CSS clamp()](https://theplusaddons.com/blog/css-clamp/) is the unrelated, similarly named function for fluid sizing. It clamps a value between a minimum and a maximum, not lines of text.*

## The Standard line-clamp Property

There is a standard property too. The syntax MDN lists accepts a number of lines, an optional block-ellipsis value, or both, and the standard property does not need the legacy box setup. The catch is availability. MDN marks `line-clamp` as limited availability, meaning it is not yet Baseline because it does not work in some of the most widely used browsers.

`/* standard syntax: forward-looking, not yet safe alone */
.clamp-3 {
line-clamp: 3;
}

/* ship both: the prefixed block works today */
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}`

The practical advice is to lead with the working prefixed block and add `line-clamp` beside it, so the page upgrades itself as support improves. Do not ship the standard property on its own yet, because in a browser that ignores it the text will simply run to full length.

## Why Line Clamp Sometimes Does Nothing

Line clamp fails silently, which makes it frustrating to debug. In almost every case, one of the required pieces is missing. The image below shows the two common failures next to a working rule.

![Line clamp failing when webkit-box-orient or overflow hidden is missing](https://theplusaddons.com/wp-content/uploads/2026/11/lc-missing.webp)Left: only the clamp number set. Middle: `display` and the clamp set, but no orientation and no overflow rule. Right: all four pieces present.

- **The clamp number alone.** `-webkit-line-clamp` does nothing without the `-webkit-box` display value.- **`-webkit-box-orient` is missing.** The legacy box defaults to horizontal, and the clamp only applies to a vertical one.- **`overflow: hidden` is missing.** The ellipsis may appear, but the extra lines can stay visible below it.- **Padding on the clamped element.** Padding sits inside the box, so lines past the limit can show through the padding area. Put padding on a wrapper and clamp an inner element.- **A build tool removed the prefixed lines.** Some autoprefixer settings strip `-webkit-box-orient` because they consider it outdated. Check the compiled CSS, not just your source.

That last point catches many people. If the clamp works in development and disappears in production, compare the output stylesheet against your source before blaming the browser. Add a comment such as `/* autoprefixer: ignore next */` in toolchains that support it, or move the declaration to a place the optimiser does not touch.

## Making Card Grids The Same Height

Line clamp earns its place in card grids. Clamp the description on every card and the long ones stop dictating the layout. This is the reason most people reach for the property in the first place.

![Card grid with uneven heights compared with the same grid after descriptions are clamped to three lines](https://theplusaddons.com/wp-content/uploads/2026/11/lc-cards.webp)Top: three cards, three heights. Bottom: the same cards with the description clamped to three lines.

`.card p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.card { display: flex; flex-direction: column; }
.card .btn { margin-top: auto; }`

Clamping the text caps the maximum height, but short cards are still shorter than long ones. To line the buttons up at the bottom, make the card a flex column and push the button down with `margin-top: auto`, as the last two rules do. For a grid, `align-items: stretch` (the default) then makes every card in a row the same height.

## Reserving Space With min-height

Line clamp sets a maximum, not a minimum. If you want every description to take exactly three lines of space even when the text is one line long, give the element a minimum height in line-height units. Writing the height as a multiple of your line height keeps the number tied to the type size.

`.card p {
line-height: 1.5;
min-height: calc(1.5em * 3);
}`

With the line height written as a unitless `1.5`, three lines are `1.5em * 3`. Keep the two values in step, or the reserved space will drift away from the clamp as soon as someone changes the font size. A CSS custom property for the line height and the line count makes that harder to break.

## Building A Read More Toggle

A clamped paragraph hides text, so give readers a way to see the rest. The simplest toggle removes the clamp class on click. A few lines of JavaScript also let you show the button only when the text is actually truncated.

![A paragraph in collapsed and expanded states with a Read more button](https://theplusaddons.com/wp-content/uploads/2026/11/lc-readmore.webp)Collapsed with the clamp class applied, then expanded after the class is removed.

`document.querySelectorAll('.js-clamp').forEach((box) => {
const text = box.querySelector('p');
const btn = box.querySelector('button');

// show the button only if the text is really cut off
btn.hidden = text.scrollHeight <= text.clientHeight;

btn.addEventListener('click', () => {
const open = text.classList.toggle('is-open');
btn.textContent = open ? 'Show less' : 'Read more';
btn.setAttribute('aria-expanded', open);
});
});`

```
.js-clamp p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.js-clamp p.is-open {
display: block;
-webkit-line-clamp: unset;
}
```

Comparing `scrollHeight` with `clientHeight` is the standard way to detect truncation: if the content is taller than the visible box, something is hidden. Set `aria-expanded` on the button so assistive technology can tell whether the extra text is showing. Run the check after fonts load and again on resize, because both change how many lines the text occupies.

## Accessibility And SEO Of Clamped Text

Line clamp is a visual effect only. The full text is still in the document, so search engines can read all of it, and screen readers announce the whole paragraph even though sighted users see three lines. That is a benefit, but it has consequences for the design.

- **Do not hide critical information.** If a price, date or warning could fall past line three, move it above the clamped text.- **Offer a way to read more.** A sighted keyboard user cannot see the hidden text without a control, so provide a link to the full article or a toggle.- **Mind zoom and large type.** People who enlarge their text will see fewer words per line, and the clamp will cut more of the content than you tested.- **Avoid clamping headings you need in full.** Truncating a title can remove the words that make it unique.

A useful rule is that clamping should shorten a preview, never replace the content. The full text should always be available one click away.

## Limit Text In Elementor Without Custom CSS

In Elementor there is a second way to shorten text, and it works differently. Instead of hiding lines, The Plus Addons for Elementor cuts the text itself to a number of characters or words. That matters when you want the shortened text in the page source, not only on screen.

According to the [text limit guide](https://theplusaddons.com/docs/limit-wordcount-text-widget-elementor/), the Text Block widget has a Description Limit option, part of the free plugin, that shortens its text to a set number of characters or words and can add dots at the end. The same guide notes that Elementor's own Text Editor widget has no such option. For blog listings, the [excerpt limit guide](https://theplusaddons.com/docs/limit-post-excerpt-in-elementor-blog-posts/) describes a Count setting in the Blog/Post Listing widget that trims every excerpt to the length you set.

### Step-by-Step

- Drag the Text Block widget onto the page and type or paste your text into Content, Description.- Switch on Description Limit.- In Limit on, choose Character (the default) or Word.- Enter the maximum in Count, from 1 to 1000. While Count is empty, nothing is cut.- Leave Display Dots on to end shortened text with an ellipsis, or switch it off to cut cleanly.

For listings, add the Blog/Post Listing widget, open Content, then Extra Option, and make sure Display Content is on. Set Count right under it. It defaults to 30, and the guide suggests 15 to 20 for a three-column grid. A manual excerpt is trimmed if the post has one, and otherwise WordPress builds one from the start of the content.

### Line Limit Or Word Limit

| Question | CSS Line Clamp | Elementor Count Limit |
| -------- | -------------- | --------------------- |
| What is cut | Lines of rendered text, hidden visually | Characters or words of the text itself |
| Box height | Predictable, whatever the text | Depends on how the shortened text wraps |
| Full text in page source | Yes | No, only the shortened text is output |
| Responds to screen width | Yes, fewer words fit per line | No, one value for all devices |
| Needs CSS | Yes | No |
Neither is better. They answer different needs and can be used together.

The same guides list limits worth knowing. The character option counts the hidden HTML of your formatting, so a normal paragraph uses a few characters of the Count for its tags, and it counts bytes rather than letters, so accented letters can use more than one. Word mode never cuts a word in half. For cards where exact alignment matters, a Count limit combined with a CSS line clamp gives a consistent height and a clean ending. See the [title limit guide](https://theplusaddons.com/docs/limit-blog-post-title-in-elementor/) for titles and the [Read More button guide](https://theplusaddons.com/docs/add-read-more-button-in-blog-posts-in-elementor/) for the link under each card.

## Common Mistakes Worth Checking

- **Setting only `-webkit-line-clamp`.** It needs the box display, the vertical orientation and a hidden overflow.- **Putting padding on the clamped element.** Hidden lines show through it. Wrap and clamp the inner element.- **Expecting `text-overflow` to wrap.** It is a one-line technique and needs `nowrap`.- **Shipping the standard property alone.** It is limited availability. Keep the prefixed block beside it.- **Hiding key information past the cut.** Put prices, dates and warnings above the clamped text.- **No way to read the rest.** Add a link or a toggle with `aria-expanded`.- **Clamp works in development, not production.** Check whether the build tool stripped `-webkit-box-orient`.

## Browser Support

Single-line truncation is established. Multi-line truncation depends on which property you use, which is why the recommendation above is to ship the prefixed block and add the standard property alongside it.

| Feature | Status On MDN |
| ------- | ------------- |
| `text-overflow` | Baseline widely available, since July 2015 |
| `-webkit-line-clamp` | Legacy pattern, requires the box display and vertical orientation |
| `line-clamp` | Limited availability, not Baseline |
Status taken from MDN, checked on 3 November 2026. Recheck before relying on the standard property.

For the full reference, see MDN on [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/line-clamp), [-webkit-line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and [text-overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow).

[Explore The Plus Addons for Elementor](https://theplusaddons.com/pricing/)

## Suggested Reading

- [CSS clamp() for fluid type](https://theplusaddons.com/blog/css-clamp/)- [Hamburger menu in CSS](https://theplusaddons.com/blog/hamburger-menu-css/)- [Bottom-only box shadow](https://theplusaddons.com/blog/bottom-only-box-shadow/)- [Limit the post excerpt in Elementor blog posts](https://theplusaddons.com/docs/limit-post-excerpt-in-elementor-blog-posts/)- [Limit word or character count in the Text widget](https://theplusaddons.com/docs/limit-wordcount-text-widget-elementor/)