Word Break

    Normal

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

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

    Word Break - 图2

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

    Break All

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

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

    Word Break - 图4

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

    Responsive

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

    all

    Word Break - 图6

    sm

    md

    Word Break - 图8

    xl

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

    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:

    1.   module.exports = {
    2.     variants: {
    4. -     wordBreak: ['responsive'],
    5. +     wordBreak: ['responsive', 'hover', 'focus'],
    6.   }

    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:

      Background Attachment →