空格

​基本用法

¥Basic usage

​普通

¥Normal

使用 whitespace-normal 使文本在元素内正常换行。换行符和空格将被折叠。

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

<div class="w-3/4 ...">
  <div class="whitespace-normal ...">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>
</div>

​无换行

¥No Wrap

使用 whitespace-nowrap 可防止文本在元素内换行。换行符和空格将被折叠。

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

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-nowrap ...">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>
</div>

​预

¥Pre

使用 whitespace-pre 保留元素中的换行符和空格。文本不会换行。

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

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-pre ...">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>
</div>

​预线

¥Pre Line

使用 whitespace-pre-line 保留元素中的换行符而不是空格。文本将正常换行。

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

<div class="w-3/4 ...">
  <div class="whitespace-pre-line ...">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>
</div>

​预封装

¥Pre Wrap

使用 whitespace-pre-wrap 保留元素中的换行符和空格。文本将正常换行。

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

<div class="w-3/4 ...">
  <div class="whitespace-pre-wrap ...">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>
</div>

​中断空格

¥Break Spaces

使用 whitespace-break-spaces 保留元素中的换行符和空格。行尾的空白不会挂起，但会换行到下一行。

¥Use whitespace-break-spaces to preserve newlines and spaces within an element. White space at the end of lines will not hang, but will wrap to the next line.

<div class="w-3/4 ...">
  <div class="whitespace-break-spaces ...">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>
</div>

​有条件地应用

​悬停、聚焦和其他状态

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:whitespace-pre to only apply the whitespace-pre utility on hover.

<div class="whitespace-normal hover:whitespace-pre">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​断点和媒体查询

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:whitespace-pre to apply the whitespace-pre utility at only medium screen sizes and above.

<div class="whitespace-normal md:whitespace-pre">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.