Word Break

Utilities for controlling word breaks in an element.

Class reference

Class
Properties
.break-normaloverflow-wrap: normal; word-break: normal;
.break-wordsoverflow-wrap: break-word;
.break-allword-break: break-all;
.truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;

Normal

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

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

<p class="break-normal ...">...</p>

Break Words

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

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

<p class="break-words ...">...</p>

Break All

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

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

<p class="break-all ...">...</p>

Truncate

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

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

<p class="truncate ...">...</p>

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.

<p class="break-normal sm:break-words md:break-all lg:truncate xl:break-normal ...">
  ...
</p>

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

Customizing

Responsive and pseudo-class variants

By default, only responsive variants are generated for word break utilities.

You can control which variants are generated for the word break utilities by modifying the wordBreak property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     wordBreak: ['responsive'],
+     wordBreak: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

If you don't plan to use the word break utilities in your project, you can disable them entirely by setting the wordBreak property to false in the corePlugins section of your config file:

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

Tailwind UI is now in early access!