Text

text-overflow

text-overflow decides how text that overflows its box ends. With ellipsis, the cut is marked with "…".

Syntax

[ clip | ellipsis | <string> | fade | <fade()> ]{1,2}

Preview

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

Presets

Drag the bottom-right corner to resize

Code

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

Controls

text-overflowellipsis

clipellipsis

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

About

text-overflow does nothing by itself. Once lines stop wrapping (white-space: nowrap) and the overflow is hidden (overflow: hidden), it changes how the end of the line looks. The code on this page includes both.

Writing the value

clip: cuts the text at the edge of the box, possibly in the middle of a letter. This is the initial value.
ellipsis: marks the cut with "…", hiding the letters before it to make room.

The spec also allows a custom string (such as "→") and separate values for each end of the line, but Chrome does not support them, so this page does not offer them.

Truncating several lines

text-overflow only works on a single line. To add "…" at the end of the second or third line, use -webkit-line-clamp.

References

MDN Web Docstext-overflow SpecificationCSS Overflow Module Level 4 Can I usetext-overflow