Add supports for overflow-wrap: anywhere (word-break: break-word alternative)

[serkodev]

Clear and concise description of the problem

Before we start, according to MDN's word-break introduction:

• word-break: break-word is deprecated
• word-break: break-word = word-break: normal + overflow-wrap: anywhere

The problem is Tailwind CSS only provides the break-words class (corresponding to CSS overflow-wrap: break-word;) and does not support word-break: break-word / overflow-wrap: anywhere.

The overflow-wrap documentation mentions that the break-word and anywhere values are almost identical, but there are still some differences.

• anywhere
  Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.

• break-word
  ... soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

Research

Although I have not delved into the underlying principles in practice, I have done a code test to demonstrate the differences between different values in use:

Source code: Tailwind Play

As you can see in the example above, neither break-words nor break-all can fully serve as replacements.

min-w-0 is hacky and not perfect

Several solutions have been proposed for content word wrapping, one of which includes the combination of min-w-0 with break-words (related issues). While this method is recognized, it presents certain limitations. Specifically, it necessitates its application directly to the content element. This is in contrast to the overflow-wrap: anywhere property, which can be applied to the parent element, subsequently affecting all child content for word breaking.

Source code: Tailwind Play

Suggested solution

Current browser support situation:

• Although word-break: break-word is deprecated, it can still be used in the latest version of Chrome
• Currently, caniuse for overflow-wrap: anywhere; is only at 91.87%, with support in iOS 15.4 and above

Given the above situation, I propose the following solution and fallback methods and hope for feedback from everyone.

@supports (overflow-wrap: anywhere) {
  .break-anywhere {
    overflow-wrap: anywhere;
  }
}

@supports not (overflow-wrap: anywhere) {
  .break-anywhere {
    word-break: break-word;
  }
}

Updated fallback solution authored by @MichaelAllenWarner

Naming reason (break-anywhere):

• Using break- as a prefix to easily categorize it with other similar word break classes
• Using anywhere as a suffix because I do not want to confuse it with break-words, and overflow-wrap: anywhere; is the replacement for word-break: break-word;.

Alternative

For those who looking for Tailwind CSS class utilities.

supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere]
supports-[not(overflow-wrap:anywhere)]:[word-break:normal]

Related

Issues: #835, #10004, #11255, #10481
My original research: unocss/unocss#2614

[serkodev]

Just submitted a PR #12128 for adding this break-anywhere utility.

[MichaelAllenWarner]

I've had similar thoughts, but I'm not sure if it's a good idea for a core TW utility to be setting different properties in different environments.

That said, if this were to be implemented, something like this might be a little cleaner:

@supports not (overflow-wrap: anywhere) {
  .break-anywhere {
    word-break: break-word;
  }
}

@supports (overflow-wrap: anywhere) {
  .break-anywhere {
    overflow-wrap: anywhere;
  }
}

[serkodev]

Feels good. Thank you for your suggestion. I hope you don't mind if I update it in my PR and discussion topic. (added credit to you)

[mdrideout]

Sorry but with word-break: break-word being deprecated, why isn't overflow-wrap: anywhere; supported yet?

overflow-wrap: break-word; is doing absolutely nothing for my use cases, where word-break: break-word and overflow-wrap: anywhere; work fine.

Use case is a heading or paragraph text instance of a very long chain of characters such as:

Support_supp_doc-5357z9dfds88768dfdse0caf59e81849a96750bd5b9d7ce9ba7f6a3c286a543dd42345fgfd333ee.pdf

overflow-wrap: break-word; simply does nothing.Tailwind has taken away the two things that actually work for one that doesn't.

[thomaspessato]

I'm with you @mdrideout. In the meantime, I'll temporarily create a CSS class for this utility in my own root css file or in my tailwind config file.

[m0nch1]

Once there, [overflow-wrap:anywhere] or something like that might be fine!