Whitespace

@include('_partials.class-table', [ 'rows' => [ [ '.whitespace-normal', 'white-space: normal;', 'Cause text to wrap normally within an element.', ], [ '.whitespace-no-wrap', 'white-space: nowrap;', 'Prevent text from wrapping within an element.', ], [ '.whitespace-pre', 'white-space: pre;', 'Preserve line returns and spaces within an element.', ], [ '.whitespace-pre-line', 'white-space: pre-line;', 'Preserve line returns but not spaces within an element.', ], [ '.whitespace-pre-wrap', 'white-space: pre-wrap;', 'Preserve spaces but not line returns within an element.', ], ] ])

Normal

Use .whitespace-normal to cause text to wrap normally within an element. Newlines and spaces will be collapsed.

No Wrap

Use .whitespace-no-wrap to prevent text from wrapping within an element. Newlines and spaces will be collapsed.

Pre

Use .whitespace-pre to preserve newlines and spaces within an element. Text will not be wrapped.

Pre Line

Use .whitespace-pre-line to preserve newlines but not spaces within an element. Text will be wrapped normally.

Pre Wrap

Use .whitespace-pre-wrap to preserve newlines and spaces within an element. Text will be wrapped normally.

Responsive

To control the whitespace property of an element only at a specific breakpoint, add a {screen}: prefix to any existing whitespace utility. For example, adding the class md:whitespace-pre to an element would apply the whitespace-pre utility at medium screen sizes and above.

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

null

Customizing

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