break-words class might need to include word-break: break-word

[cysabi]

What version of Tailwind CSS are you using? v3.2.4
What build tool (or framework if it abstracts the build tool) are you using? Gatsby v5.2.0
What version of Node.js are you using? 18
What browser are you using? Firefox
What operating system are you using? Windows

Reproduction URL

https://play.tailwindcss.com/OVE2UF43o2

Describe your issue

I state "might" because this might be a browser bug, or another class that I should add, apologies if this is the case.

• The flex class is required on the parent for this to occur, if I remove that, both results become identical.
• Adding flex-col also causes both results to become identical, which is a bit odd to me.

Here is what it looks like on my screen:

I found it odd that in the docs the break-words class uses overflow-wrap exclusively, while all of the other classes at least include word-break.

Perhaps all of those classes should include both overflow-wrap and word-break.

[reinink]

Hey! So you're right, this is kind of confusing at first glance. We're using overflow-wrap: break-word here because word-break: break-word has been deprecated.

That said, I think the issue you're running into here is the same as #5446, where you need to add min-w-0 to the text element. I've gone ahead an updated your example to illustrate this:

https://play.tailwindcss.com/gi78CVyPam

As @adamwathan mentions in that other issue, you'll probably find yourself needing to use this technique more often, even in situations not related to break words stuff, super common annoying little flex issue.

Hope that helps! 👍

[tonyxiao]

It seems that min-w-0 doesn't fix it in all situations. I'm using shadcn/ui AlertDialogTitle component and this is what I'm getting when having a long title. overflow-wrap: anywhere fixes fwiw

[tonyxiao]

However there appears to be no overflow-wrap class in tailwindcss

[serkodev]

#12127 Created a related research and discussion for this issue.