break-words class is great but not enough

[lucascaton]

Hi there.

It'd be nice to have a single Tailwind class to apply both overflow-wrap: break-word and word-break: break-word declarations.
The break-words class is great but doesn't cover all scenarios (sorry if I'm missing something). Here's an example:

• Using the break-words class:

  

• Using overflow-wrap: break-word and word-break: break-word declarations:

  

---

Example:

<div class="bg-gray-200 h-screen">
  <main class="container mx-auto bg-white h-screen">
    <table class="table-auto w-full mx-auto border border-gray-200 rounded">
      <tbody class="bg-gray-400">
        <tr>
          <td class="p-6">Column</td>
          <td class="p-6">Column</td>
          <td class="p-6">Column</td>
          <td class="p-6">Column</td>
          <td class="p-6">Column</td>
          <td class="p-6">Column</td>

          <td class="p-6 break-words foobar">
            https://looooooooooooooooooooooooooooooooooooooooong-url.com -
            Preserve whole words.
            Preserve whole words.
            Preserve whole words.
            Preserve whole words.
            Preserve whole words.
            Preserve whole words.
          </td>
        </td>
      </tbody>
    </table>
  </main>
</div>

/* ↓ Uncomment the following lines to solve the issue ↓ */

/* td.foobar {
  overflow-wrap: break-word;
  word-break: break-word;
} */

(Codepen with the same example)

Please let me know your thoughts 🙂

[adamwathan]

Shitty one, what do you think the best solution is? word-break: break-word is deprecated and recommended against by MDN, but overflow-wrap: anywhere isn't supported in Safari.

You don't need overflow-wrap: break-word if using word-break: break-word I don't think anyways, at least in my testing. These are some of the most confusing CSS properties in existence :/

[rightaway]

@adamwathan Is there any downside to adding overflow-wrap: anywhere and word-break: break-word to break-words utility? The first would be for all browsers except Safari and the second deprecated one would be for Safari. Because otherwise you have to add these styles manually to the markup wherever you use break-words.

[lucascaton]

word-break: break-word is deprecated

Hmmm, you're right 😞 (MDN)

what do you think the best solution is?

It looks like overflow-wrap: anywhere that you suggested solves the issue but as you said, Safari doesn't support it.

Are you planning to create a Tailwind class for overflow-wrap: anywhere?

Thanks, Adam!

[KBM90]

Right , I find overflow-wrap:anywhere most efficient , for my case I used with the table data after a bunch of tries with normal and ellipsis tailwind's properties

[lucascaton]

Update: Safari supports it now 🎉

[borisghidaglia]

Hey 👋

Hmmm, you're right 😞 (MDN)

Sorry if I'm missing something, but is word-break: break-word still deprecated?
The link you shared here doesn't show any deprecation anymore, right?

[AdamZaczek]

Bump - overflow-wrap:anywhere is needed!

[FiveOFive]

According to mdn/browser-compat-data#17012 overflow-wrap: anywhere is now supported in Safari since 15.4.

[Jakeduncan00]

.one {
word-break: break-all
}
.two {
word-wrap: break-word;
}

word-break: break-all:

Your selected shipping was UK_RoyalMailSecondClassStandard.

Your selected shipping was Signed For 1st Class.

word-wrap: break-word:

Your selected shipping was UK_RoyalMailSecondClassStandard.

Your selected shipping was Signed For 1st Class.

Krowd Darden

[rap2hpoutre]

According to mdn/browser-compat-data#17012 overflow-wrap: anywhere is now supported in Safari since 15.4.

@adamwathan Let's go then?

Also: https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere

[mortennajbjergjp]

The example from @lucascaton shows a table. I am experiencing a similar issue using grid.
This is the solution I use for now:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .overflow-anywhere {
    overflow-wrap: anywhere;
  }
}

[shrekuu]

I guess @adamwathan would choose break-anywhere as the class name. 😆

[Blackklegend]

Bump - overflow-wrap:anywhere pls

[adamwathan]

Added support for overflow-wrap: anywhere to my list of stuff to look into!

In the mean time don't forget you can always use arbitrary properties:

<div class="[overflow-wrap:anywhere]">

[evybauer]

break-all should solve the issue
https://tailwindcss.com/docs/word-break#break-all

[shrekuu]

Well, it doesn't.

We just want to break words that are too long(more than one line), and keep these short ones(less than one line).

I created a demo here. https://play.tailwindcss.com/fhv0vZlsea

We want the good old word-break: break-word one. I never know why this is deprecated without a ready alternative.

Also, check out this answer. https://stackoverflow.com/a/75221783

[stromseng]

Hey, i saw this was being looked into, but haven't seen any updates on it. Just stumbled upon this myself, and would greatly appreciate support for overflow-wrap: anywhere

[DePasqualeOrg]

Same here. I found this by searching for "tailwind break-words not working" and am using [overflow-wrap:anywhere] for now.

[kvtemadden]

Snap, prefer to avoid arbitrary values as much as possible. Hoping to see it at some point soon.

[johanbook]

Ran into this issue as well and would love seeing it as part of Tailwind

[agjs]

@adamwathan Any news on this? So many people are asking for it...

[OmkarJ13]

Bump. This class is much needed

[danielraab]

Same discussion here: #12127
with a pull request: #12128

[lucascaton]

This should be fixed in Tailwind CSS 4.1 🎉

https://tailwindcss.com/blog/tailwindcss-v4-1#fine-grained-text-wrapping-with-overflow-wrap