Text Overflow

Use text overflow utilities to control how overflowing text is handled within an element.

---

Truncating text

Use the truncate utility to prevent text from wrapping and truncate overflowing text with an ellipsis (…):

Style('truncate', child: Text('The longest word in any of the major...'))

Class reference

Class	Behavior
truncate	Single line, ellipsis (maxLines: 1, TextOverflow.ellipsis, softWrap: false)
text-ellipsis	Multi-line behaviour not yet correct. Flutter’s TextOverflow.ellipsis without maxLines truncates to a single line; CSS shows ellipsis only on the line that overflows in a multi-line block. See the Library prerequisites section in PLAYGROUND_PARITY.md.
text-clip	Multi-line clip not yet correct. Flutter breaks long unbreakable words at character boundaries to fit the container, so the overflow that overflow-hidden would clip never occurs. See the Library prerequisites section in PLAYGROUND_PARITY.md.

The truncate utility is a shorthand that sets maxLines: 1, TextOverflow.ellipsis, and softWrap: false together — a combination Flutter handles natively, which is why it renders identically to upstream while the multi-line variants do not.