Text overflow

Syntax

Class
Properties
text-overflow-ellipsis
text-overflow: ellipsis;
text-overflow-clip
text-overflow: clip;
text-truncate
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
<div class="t1 w-256 bg-c-white shadow-4 p-8 text-truncate"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquamsitametullamcorpernequedonecplaceratmiutenimporttitor sagittis. Donec nec tincidunt tortor. </div> <div class="t1 mt-16"> Notice that the text is shown on a single line </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Show an ellipsis where overflowing content is cropped.
t1 text-overflow-ellipsis
.t1.text-overflow-ellipsis { text-overflow: ellipsis; }
Just crop overflowing content, do not provide any hint.
t1 text-overflow-clip
.t1.text-overflow-clip { text-overflow: clip; }
Shorthand utility to force text on a single line and show an ellipsis when the text is overflowing.
t1 text-truncate
.t1.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }