Truncate text to N lines with ellipsis

Clamp a block of text to a fixed number of lines with a trailing ellipsis, using line-clamp.

text
ellipsis
line-clamp
overflow

Lines3

Max width320px

HTML

<p class="clamp">WebTricks is a growing toolbox of fast, in-browser tools and ready-to-copy snippets for web developers. This paragraph is intentionally long so you can watch it clamp to a set number of lines with an ellipsis at the end as you drag the controls.</p>

CSS

:root {
    --lines: 3;
    --max: 320px;
}

.clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--lines);
    line-clamp: var(--lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: var(--max);
}

How it works

For multi-line truncation the reliable cross-browser approach is the -webkit-box + line-clamp combo (supported everywhere despite the prefix). Change --lines to set how many lines survive before the ellipsis.

For a single line, you don’t need this — use the classic trio instead:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;