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

Word break

Syntax

Class

Properties

break-normal

overflow-wrap: normal;
word-break: normal;

break-words

overflow-wrap: break-word;

break-all

word-break: break-all;

<div class="t1 w-256 p-16 bg-c-white shadow-4 break-normal"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet ullamcorper neque. Donecplaceratmiutenimporttitorsagittis. Donec nec tincidunt tortor. Fusce sodales, felis ac luctus accumsan, quam mi vestibulum enim, eu gravida nunc tortor a diam. </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.

Add line breaks at word boundaries only.

t1 break-normal

.t1.break-normal { overflow-wrap: normal; word-break: normal; }

Add line breaks anywhere if necessary.

t1 break-words

.t1.break-words { overflow-wrap: break-word; }

Ignore word boundaries, happily break text by any letter.

t1 break-all

.t1.break-all { word-break: break-all; }