Typography

Text Overflow

Utilities for controlling text overflow in an element.

Quick reference

Class	Description
truncate	overflow: hidden text-overflow: ellipsis white-space: nowrap
text-ellipsis	text-overflow: ellipsis
text-clip	text-overflow: clip

Basic usage

Truncate

Use truncate to prevent text from wrapping and truncate overflowing text with an ellipsis (…).

A really long finnish word, that has nothing to do with Warp technology, is Lentokonesuihkuturbiinimoottoriapumekaanikkoaliupseerioppilas, meaning Aeroplane jet turbine motor assistant mechanic non-commissioned officer in training.

<p class="truncate ...">...</p>

Ellipsis

Use text-ellipsis to truncate overflowing text with an ellipsis (…).

A really long finnish word, that has nothing to do with warp technology, is Lentokonesuihkuturbiinimoottoriapumekaanikkoaliupseerioppilas, meaning Aeroplane jet turbine motor assistant mechanic non-commissioned officer in training.

<p class="text-ellipsis overflow-hidden ...">...</p>

Clip

Use text-clip to clip the text at the limit of the content area.

A really long finnish word, that has nothing to do with warp technology, is Lentokonesuihkuturbiinimoottoriapumekaanikkoaliupseerioppilas meaning Aeroplane jet turbine motor assistant mechanic non-commissioned officer in training.

<p class="text-clip overflow-hidden ...">...</p>