Add word-wrap and word-break to Reboot

[leafac]

Why would you want the default browser behavior of a long word overflowing the container?

What’s already done:

• Applied .text-break to body in Reboot (see https://getbootstrap.com/docs/5.0/utilities/text/#word-break)
• Removed instances of word-wrap from components, which now became redundant.

What’s left to do:

• Remove .text-break?
• Provide an utility with the converse, which sets word-break and word-wrap back to normal?

Follow up to: #20323

[leafac]

@twbs/css-review

Please let me know if there’s anything I can do to help in the review. Also, I’d appreciate some direction on what to do with respect to the utilities, as mentioned in my original message.

Thank you 😀

[ffoodd]

Needs deep test for both our docs and examples to see if we're missing any side-effect. In my task list :)

[ffoodd]

Back to this, sorry for the delay. I noticed quite a few cases where it's not appropriate:

• Our "Copy" buttons are shrinked, everywhere, mostly because they're absolutely positioned.
• When a button is a flexible item, it'll shrink, as you can see in the carousel example's header
• Tables behavior might change too, as tooltip's options one.

I tend to agree with the suggestion, however it'd clearly have major impacts and should be considered a breaking change. I think we'll pass on this one for v5, but might reconsider it for v6. @mdo any thougt?

[leafac]

Oh, good points. Thanks for looking into this. These things always have more ramifications than we’d expect. For your convenience, here are the issues that @ffoodd mentioned:

Leaving it for v6 sounds reasonable.

[mdo]

Closing as stale for now, can revisit in v6.