Whitespace

Normal

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

No Wrap

Use whitespace-nowrap 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.

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

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

Customizing

Variants

默認情況下, 只有 響應式 的 whitespace 變化模式 (variants) 會產生。

在 tailwind.config.js 的 variants 區塊中變更 whitespace 屬性來決定有哪些變化模式會生成。

舉個例子來說，這個設定將會生成 響應式 和 hover 的變化模式。

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       whitespace: ['responsive', 'hover'],
      }
    }
  }

Disabling

如果你不打算在專案中使用 whitespace 功能，可以在你的設定檔裡的 corePlugins 屬性中將 whitespace 設定為 false 來停用功能：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     whitespace: false,
    }
  }