How to Truncate Text With Dots (Ellipsis) in CSS

Truncating overflowing text with a trailing ellipsis ("…") is a common UI need for card titles, table cells, and any fixed-width container — single-line truncation is a well-established three-property CSS combination, while multi-line truncation needs a different, newer approach.

Single-line text truncation

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* or width, or a percentage — some constraint is required */
}

All three properties are required together — text-overflow: ellipsis alone does nothing without overflow: hidden to actually clip the text, and without white-space: nowrap the text would simply wrap onto a new line rather than overflowing in a single line to begin with.

Why a width constraint is necessary

Without max-width, width, or some other sizing constraint on the element, there's nothing for the text to actually overflow relative to — the ellipsis effect only kicks in once the text's natural width genuinely exceeds the container's defined width.

Multi-line truncation with line-clamp

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

-webkit-line-clamp truncates after a specific number of lines rather than a single line — despite the -webkit- prefix suggesting limited support, this property now works in all major modern browsers, though the prefix and the accompanying display: -webkit-box are still required for it to function.

The standard (unprefixed) line-clamp property

.truncate-multiline {
    display: block;
    line-clamp: 3;
    -webkit-line-clamp: 3; /* keep both for broader compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

An unprefixed line-clamp property now exists in the CSS specification, but browser support is still catching up — including both the prefixed and unprefixed versions together is the pragmatic current approach until unprefixed support is universal enough to drop the older syntax.

Truncating in the middle instead of the end

CSS has no built-in property for middle-truncation (like example...file.pdf instead of example-long-file-nam...) — this genuinely requires JavaScript to measure text width and manually construct the truncated string, since standard CSS ellipsis behavior only ever truncates from the end.

Showing the full text on hover

    This is the full, complete text of the item

Adding a title attribute with the full text gives a native browser tooltip on hover — a simple, no-JavaScript way to let a user see the complete text of something that's visually truncated, without needing a custom tooltip component.