Developer

Intros How it works API reference Turbo CSS Fundamentals Utilities Box sizing Display Float Clear Overflow Position Z index Width Min width Max width Height Min height Max height Margin Padding Border Border width Border color Border style Border radius Outline Outline width Outline color Outline style Outline offset Top Right Bottom Left Inset Flex direction Flex grow Flex shrink Flex basis Flex wrap Order Flex Flex box alignment Justify content Align content Align items Align self Table layout Border collapse Background attachment Background clip Background color Background position Background repeat Background size Background pattern Object fit Object position Box shadow Opacity Visibility Color Font family Font size Font smoothing Font style Font weight Letter spacing Line height List style type List style position Tab size Text align Text decoration Text transform Text overflow Vertical align Whitespace Word break Transform Scale Rotate Translate Skew Transform origin Transition Transition property Transition duration Transition timing function Transition delay Appearance Cursor Pointer events Resize User select Fill Stroke color Stroke width Selectors Download Turbo UI

Layout

Box sizing Display Float Clear Overflow Position Z index

Sizing

Width Min width Max width Height Min height Max height

Spacing

Margin Padding

Border

Border Border width Border color Border style Border radius

Outline

Outline Outline width Outline color Outline style Outline offset

Coordinates

Top Right Bottom Left Inset

Flexbox

Flex direction Flex grow Flex shrink Flex basis Flex wrap Order Flex Flex box alignment

Box alignment

Justify content Align content Align items Align self

Table

Table layout Border collapse

Background

Background attachment Background clip Background color Background position Background repeat Background size Background pattern

Object

Object fit Object position

Effects

Box shadow Opacity Visibility

Text

Color Font family Font size Font smoothing Font style Font weight Letter spacing Line height List style type List style position Tab size Text align Text decoration Text transform Text overflow Vertical align Whitespace Word break

Transform

Transform Scale Rotate Translate Skew Transform origin

Transition

Transition Transition property Transition duration Transition timing function Transition delay

Interactivity

Appearance Cursor Pointer events Resize User select

SVG

Fill Stroke color Stroke width

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;

1
2
3
4
5
6
<div class="t1 w-256 bg-c-white shadow-4 p-8 text
    -truncate">
    Lorem ipsum dolor sit amet, consectetur adipiscing 
        elit. Aliquamsitametullamcorpernequedonecplace
        ratmiutenimporttitor sagittis. Donec nec 
        tincidunt tortor.
</div>
<div class="t1 mt-16">
    Notice that the text is shown on a single line
</div>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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; }