Bootstrap: 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: #30074
• v5 PR: #29325
• Original issue: #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.

[mdo]

Looking at this Codepen I made a couple weeks ago again, it seems like a browser bug or unintentional behavior that word-break: word-wrap would have different behavior than word-wrap: break-word/overflow-wrap: break-word with flex containers. While the former is deprecated, it fixes some weird behaviors, so I'm in favor of bringing it back.

[ihorzenich]

@mdo @XhmikosR This fix was backported to v4 with without keeping word-wrap: break-word for IE and Edge Legacy (see: https://github.com/twbs/bootstrap/issues/29319)

There's no issue in v5:

.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

But in v4 we have word-break which didn't support break-word value in IE and Edge Legacy (comment in source is wrong) and overflow-wrap which is absent in IE/Edge Legacy (it's modern replace for word-wrap):

.text-break {
  word-break: break-word !important; // IE & < Edge 18
  overflow-wrap: break-word !important;
}

So .text-break don't work in IE/Edge Legacy in v4 now.
I fixed it by sync .text-break in v4 with v5 and created PR for that: https://github.com/twbs/bootstrap/pull/31727

[ihorzenich]

Unfortunately .text-break don't work inside flex containers in IE/Edge Legacy even with this fix.
This happens because it don't support break-word value for word-break property.

In modern browsers word-break: break-word treated as word-break: normal+overflow-wrap: anywhere (which means it work inside flex), but in IE/Edge Legacy we only have word-wrap: break-word supported which has the same effect as overflow-wrap: break-word (which didn't work inside flex).

To fix it we need to define a width for the container.
See: https://stackoverflow.com/questions/35111090/text-in-a-flex-container-doesnt-wrap-in-ie11#answer-35113633
width: 100% works both in IE and Edge Legacy,
flex-basis: 100% and flex: 1` will work only in IE11, not in Edge Legacy.

Demo: https://codepen.io/ihorzenich/pen/LYNqqPJ