Add word-break: break-word to wordBreak core plugin

[Siilwyn]

It would be great to have word-break: break-word available, handy when you have no control over the length of data coming in. E.g. in a chat message (my current problem).

[adamwathan]

break-words should already do what you need 👍

https://tailwindcss.com/docs/word-break/#break-words

word-break: break-word is deprecated in CSS.

If you have any examples of where break-words behaves differently in a problematic way please share, I could never quite figure out the real difference!

[Siilwyn]

Thank you for the quick reply, I'll dig into creating a minimal re-creatable example when I find some time!

The chat I work on has a difference in styling behavior I know that for sure. Using a deprecated property is also something I want to avoid so let's see...

[Siilwyn]

Alright I have an example that shows the difference @adamwathan!
Check out this link, I like to open the preview on the side by pressing the 'Show' button in the top left:
https://glitch.com/edit/#!/word-overflow-comparison

Instead of using the deprecated property the example does show that overflow-wrap: anywhere is a good alternative but that is not yet in tailwindcss right?

[adamwathan]

I think the reason for the difference in your example is due to flexbox, not due to the wrapping stuff. If you make sure the flex container imposes the correct width on the paragraph (using flex-1 min-w-0) it breaks the same way as the others:

https://glitch.com/edit/#!/young-principled-mask?path=index.html%3A13%3A46

[Siilwyn]

Still using overflow-wrap: anywhere gives the desired result without changing the parent styling. That said I understand the same result can be achieved using existing tailwindcss classes.

Thanks for the help & quick replies! ❤️