text-break class is not working anymore from Bootstrap 4.4.1 to 4.5.0

[marcosandri-dev]

• Operating system and version: MacOS
• Browser and version: Chrome 81
• What happens: https://codepen.io/marcosandri-dev/pen/bGVjvXM

The workaround I have found for this is to put back the word-break: break-word in the text-break class, like it was in the previous versions;

• Solution: https://codepen.io/marcosandri-dev/pen/YzyjLPZ

[mdo]

Confirmed:

[mdo]

Most investigation shows this works with block level elements, but when flexbox is introduced, it falls apart. See https://codepen.io/emdeoh/pen/dyYjwoO?editors=1100.

[mdo]

Cross referencing some things...

• v4 backport: .text-break fix #30074
• v5 PR: Use word-wrap in .text-break for IE and Edge compatibility. #29325
• Original issue: Look if we need to add a fallback for word-break #28304

/cc @MartijnCuppens

[florianlacreuse]

By default, flex items won’t shrink below their minimum content size. Setting min-width: 0 on concerned flex items fix the text break. See https://codepen.io/florianlacreuse/pen/ZEbMGda (FWIW)

[mdo]

Oh yeah, didn't think about that at all. Do we ship this as a fix, or tell folks to use min-width: 0 (and possibly provide a utility for that)? Feels like we do both: ship this and add some docs around this behavior.

[MartijnCuppens]

Adding the min-width will be quite hard to implement with our utility API I guess

[mdo]

@MartijnCuppens You okay then with shipping an update to bring back word-break: break-word on the utility and a mention about this flexbox issue in our docs? And, likely for v4 and v5?

[nicolomonili]

Same issue here (MacOS / Google Chrome 81.0.4044.138 / Bootstrap 4.5)
An element with class text-break no longer works properly if it is placed inside an element with the class d-flex.

min-width:0 fix the problem for now

[florianlacreuse]

@mdo @MartijnCuppens Be careful, as I said in this issue word-break: break-word is deprecated, just for the record.

@nicolomonili Thanks, see the anwser about the minimum content size behavior on flex items.

[nicolomonili]

The problem is also present with tables / td, but in this case the problem persists even adding min-width:0. Try to add class="text-break" on a <td> with a long text.

Ok with 4.4 https://getbootstrap.com/docs/4.4/content/tables/#responsive-tables

Not ok with 4.5 https://getbootstrap.com/docs/4.5/content/tables/#responsive-tables

[florianlacreuse]

In this case table-layout: fixed; makes things work fine. But yeah less than ideal. I will be OK with any decision, even if we need to go back to word-break property.