Whitespace

Utilities for controlling an element’s white-space property.

Contents

Quick reference

Class	Properties
`.text-wrap`	white-space: normal;
`.text-nowrap`	white-space: nowrap;

Basic usage

Wrap

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

Hey everyone! It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

<div style="width: 384px">
  <p class="text-wrap">Hey everyone! It's almost 2022 and we ...</p>
</div>

No wrap

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

Hey everyone! It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

<div class="overflow-x-auto" style="width: 384px">
  <p class="text-nowrap">Hey everyone! It's almost 2022 and we ...</p>
</div>