Codectionary / Developer documentation / CSS

Single-line Truncation with text-overflow

text-overflow: ellipsis draws a truncation marker for clipped inline content. It does not itself create overflow or prevent wrapping. A typical single-line pattern combines a constrained width, overflow: hidden, and white-space: nowrap.

Syntax

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

Examples

Single-line Truncation with text-overflow: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.filename { max-width: 15rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid; padding: .5rem; }
  1. Expected result: The narrow filename line ends with an ellipsis; expanding Full filename reveals the entire text.
  2. The width constraint gives the browser a boundary to overflow.
  3. Truncation affects rendering, not the underlying text node.
HTML used by this example

<p class="filename">quarterly-research-summary-and-supporting-notes.txt</p><details><summary>Full filename</summary><p>quarterly-research-summary-and-supporting-notes.txt</p></details>

Best practices

  • Provide a usable way to access essential truncated content.
  • In Flexbox, consider min-width: 0 on the shrinking item when its default minimum prevents truncation.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading