Word Break

@include('_partials.class-table', [ 'rows' => [ [ '.break-normal', "word-break: normal;\noverflow-wrap: normal", 'Only add line breaks at normal word break points.', ], [ '.break-words', 'overflow-wrap: break-word;', 'Add line breaks mid-word if needed.', ], [ '.break-all', 'word-break: break-all;', 'Break whenever necessary, without trying to preserve whole words.', ], [ '.truncate', "overflow: hidden;\ntext-overflow: ellipsis;\nwhite-space: nowrap", 'Truncate overflowing text with an ellipsis (…) if needed.', ], ] ])

Normal

Use .break-normal to only add line breaks at normal word break points.

@component('_partials.code-sample')

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

@slot('code')

...

@endslot @endcomponent

Break Words

Use .break-words to add line breaks mid-word if needed.

@component('_partials.code-sample')

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

@slot('code')

...

@endslot @endcomponent

Break All

Use .break-all to add line breaks whenever necessary, without trying to preserve whole words.

@component('_partials.code-sample')

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

@slot('code')

...

@endslot @endcomponent

Truncate

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

@component('_partials.code-sample')

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

@slot('code')

...

@endslot @endcomponent

Responsive

To control the word breaks in an element only at a specific breakpoint, add a {screen}: prefix to any existing word break utility. For example, adding the class md:break-all to an element would apply the break-all utility at medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

@endslot @slot('sm')

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

@endslot @slot('md')

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

@endslot @slot('lg')

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

@endslot @slot('xl')

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

@endslot @slot('code')

...

@endslot @endcomponent

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'word break', 'property' => 'wordBreak', ], 'variants' => [ 'responsive', ], ])