word-break vs word-wrap

[franciscolourenco]

https://next.tailwindcss.com/docs/word-break/#content
The word-break utilities documentation says it applies word-break, but its actually applying the word-wrap property.

I'm using v0.7.x

Is this changed in v1 or is it a bug?

[adamwathan]

Those docs are correct for v1 and the v0.7.4 docs are correct for v0.7.4, there's a few little differences in this particular module.

v0.7.4:

.break-words {
  word-wrap: break-word;
}

.break-normal {
  word-wrap: normal;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

v1:

.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[unphased]

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?

[kkukelka]

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?

[mgussekloo]

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

[Propaganistas]

@adamwathan Any chance to jump back in?

[adamwathan]

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 👍🏻

[koganas]

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?

[jokull]

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.

[Smerity]

@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...

[qwloh]

@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.

[RobSchilderr]

@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

[ashikjs]

@Smerity Thanks.
After adding min-w-0 to parent div it solve my problem.

[xyba1337]

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...

[RobinMalfait]

@xyba1337 this has been addressed multiple times (#10004 (comment), #4340 (comment), #3393 (comment)). 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

[Alchez]

@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.

[serkodev]

I just did some research (unocss/unocss#2614 (comment)) 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.

[serkodev]

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