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 UnoCSS 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：UnoCSS Playground

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

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.

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

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

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 UnoCSS class version (able to add to shortcuts).

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

Additional context

Similar issue: #96 (comment)

I have also seen similar discussions in other communities, but there seems to be no solution yet.
tailwindlabs/tailwindcss#835 (comment)

Finally, I understand that UnoCSS is just an engine, so I'm not sure whether addressing this issue should be done through the default preset or by allowing developers to add their own rules or CSS classes as needed. I'd appreciate hearing everyone's thoughts on this matter.

Validations

• Read the Contributing Guidelines.
• Read the README.md of using the package.
• Already used the Interactive Docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.