tailwindcss: word-break vs word-wrap

Hi… We’re on v2 now but .break-words is defining overflow-wrap: break-word;, however, this appears to have no effect in Chrome in my specific use-case. word-break: break-word; by itself does the trick, though!

Could it be safe to just define both?

Hi… We’re on v2 now but .break-words is defining overflow-wrap: break-word;, however, this appears to have no effect in Chrome in my specific use-case. word-break: break-word; by itself does the trick, though!

Could it be safe to just define both?

Same here. Take for instance a super long words - which are common for indo-european languages (eg german) - like ‘Veranstaltungsinformationsdienst’. Tailwind’s ‘.break-words’-utility won’t break it. A custom class with ‘word-break: break-word;’ will do the job, while also preserving somewhat correct breakpoints that would get lost by using ‘.break-all’.

Any thoughts on this?

@Smerity Thanks for linking the relevant issues. For those using grid, adding min-w-0 to children of a grid container will fix the word break issue for text inside the grid child.

I’ve come up with an Codepen example where break-words is not enough. It seems to be related to being inside <td> - in that case a word-break: break-word; is needed to get wrapping.

The proposed solution (define both) seems great. Maybe the issue can be reopened?

I had a similar problem with this issue, because only word-break: break-word was working for my use case testing in the latest version of Chrome. So I guess both should be defined as mentioned in the past comments from @unphased and @mgussekloo

Why use both properties on .break-normal and not on .break-words?

@xyba1337 this has been addressed multiple times (https://github.com/tailwindlabs/tailwindcss/issues/10004#issuecomment-1337464731, https://github.com/tailwindlabs/tailwindcss/issues/4340#issuecomment-840557704, https://github.com/tailwindlabs/tailwindcss/issues/3393#issuecomment-769997625). It’s because word-break: break-word is deprecated and shouldn’t be used.

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#syntax

@Smerity Thanks for linking the relevant issues. For those using grid, adding min-w-0 to children of a grid container will fix the word break issue for text inside the grid child.

this saved me an hour

@jokull Thank you, I found the same problematic situation where break-words isn’t enough and required word-break: break-word when dealing with text inside a table’s <td>.

Note that word-break is supposedly deprecated and the correct solution (according to various related issues) is to add min-w-0 to the child of the flex container - though I can’t find the right place to put this it seems…

I just did some research (https://github.com/unocss/unocss/issues/2614#issue-1708355842) about word-break: break-word, overflow-wrap: anywhere and break-all. I agree overflow-wrap: anywhere should be supported.

@RobinMalfait @adamwathan Hope this issue can be re-open again.

@RobinMalfait, any chance there could be support for overflow-wrap: anywhere?

Based on the documentation from word-break:

Note: While word-break: break-word is deprecated, it has the same effect, when specified, as word-break: normal and overflow-wrap: anywhere — regardless of the actual value of the overflow-wrap property.

This will also help avoid the min-w-0 solution (unfortunately doesn’t work for me) that I’ve seen in a few places.

It blows my mind how tailwind, even in 2023, doesn’t have a class which performs a simple: word-break: break-word;

I had to add it myself…

https://github.com/tailwindlabs/tailwindcss/discussions/12127 Created a related research and discussion for this issue.

Hey! We don’t monitor closed issues but if you think this should be revisited totally cool with me to open a new issue with a convincing motivating example 👍🏻