CSS / Truncate text with single-line and multiline ellipses

To shorten long text visually with CSS, use text-overflow: ellipsis for a single line and line-clamp properties to limit multiple lines. CSS does not delete the original string or return a fixed number of characters. Available width, wrapping and overflow must work together for truncation to appear.

Distinguish visual truncation from changing a string

Limiting a title to one line or a card summary to three lines differs from using the first 20 characters as data. Use CSS for the visual limit and JavaScript or server-side processing for an actual string operation. Hidden text remains in the document, so CSS does not reduce the original data length or transfer size.

Compare one and three lines with a complete example

Save the complete code below as truncate.html in UTF-8 and open it in a browser. No library or server is needed. The repeated sentence makes the text sufficiently long, and the card has a maximum width of 24rem. Save and reload after editing, then compare wider and narrower windows.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Compare single-line and multiline text</title>
  <style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .card { width: 100%; max-width: 24rem; }
    .frame { padding: 12px; border: 1px solid #777; margin-block: 1rem; }
    .sample { margin: 0; }
    .one { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .three { font-size: 16px; line-height: 1.6; max-height: 4.8em; overflow: hidden;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .row { display: flex; align-items: center; gap: 12px; }
    .grow { flex: 1; min-width: 0; }
    .badge { flex: 0 0 auto; }
    .full { line-height: 1.6; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Compare single-line and multiline text</h1>
  <div class="card">
    <h2>text-overflow: ellipsis</h2>
    <div class="frame"><p class="sample one">This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. </p></div>
    <h2>-webkit-line-clamp: 3</h2>
    <div class="frame"><p class="sample three">This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. </p></div>
    <h2>display: flex</h2>
    <div class="frame row"><div class="grow"><p class="sample one">This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. </p></div><span class="badge">A</span></div>
    <details>
      <summary>Read the full text</summary>
      <p class="sample full">This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. This example displays a long title and summary inside a limited card. Even when part of the text is visually shortened, the complete passage is available in the expandable section below. </p>
    </details>
  </div>
</body>
</html>

Expect one-line truncation in the first box, at most three lines in the second where supported, and one-line truncation inside Flexbox in the third. Open the expandable section below to read the full passage. Short text may never reach a limit and therefore show no ellipsis. Actual wrapping depends on the font, content and available width.

Conditions for a single-line ellipsis

Single-line truncation requires text to overflow its horizontal space. white-space: nowrap prevents wrapping, overflow: hidden hides the excess and text-overflow: ellipsis marks the clipped end. The following is the complete example’s .one rule.

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

Setting text-overflow alone does not force overflow or make the box narrower. The parent card constrains the width here. If a box keeps growing with its content, or the text is short enough, no ellipsis appears. Ordinary inline elements may not behave as expected; check the block box and actual layout context. MDN explanation of text-overflow

Multiline limits and a height-based fallback

Adding text-overflow: ellipsis alone does not place an ellipsis at the end of the third line. The example combines the legacy compatibility declarations -webkit-line-clamp: 3, display: -webkit-box and -webkit-box-orient: vertical, along with hidden overflow. The following is its .three rule.

.three {
  font-size: 16px;
  line-height: 1.6;
  max-height: 4.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

With font-size 16px and line-height 1.6 here, a line is 25.6px high and three lines occupy 76.8px, or 4.8em. max-height: 4.8em limits the height even if clamping is unavailable. A height limit alone does not guarantee an ellipsis. This calculation assumes the example’s consistent font size and line height, with no separate padding or border on the text element.

The unprefixed line-clamp property has varying browser support, so check the support table and rendering in your target environments. Apply it progressively with a feature query where appropriate, and check support before replacing the compatibility declarations. To compare two lines, change both the clamp count and fallback height to 2 and 3.2em, then restore the original values. MDN line-clamp compatibility and support information

When items refuse to shrink in Flexbox or Grid

A flex item’s automatic minimum width can keep it tied to its content size, preventing enough shrinkage as its parent narrows. The example gives .grow both flex: 1 and min-width: 0 so it can shrink. Apply truncation to .one, which actually contains the text.

Temporarily remove .grow’s min-width in developer tools, compare and restore it. This is not a universal requirement for every flex item; inspect the actual minimum size and overflow conditions. For Grid automatic minimum-size problems, check the item’s min-width and consider a flexible track definition such as minmax(0, 1fr) when appropriate. MDN explanation of automatic minimum sizes in min-width

Provide full text and accessible controls

Provide a way to read the hidden content. The example’s details and summary are native HTML elements that work with mouse, touch and keyboard without JavaScript. A real interface can instead provide a detail-page link or another clear expansion control.

1. Do not rely on a title-attribute mouse tooltip as the only way to read the full content. Touch and keyboard users need access too.
2. How hidden text is exposed when copied or read by assistive technology can vary. Check that necessary text remains readable and that focus works on the expansion control.
3. Check mobile screens, zoom and user-selected fonts. Do not promise a fixed character or word count, and avoid applying clipping to essential information, buttons or input fields.