Bootstrap: Media object and the css `hyphens: auto` doesn't work well on Firefox

[vpereira]

Snippet to reproduce it: https://jsfiddle.net/vpereirabr/pns761zr/14/

Browser: Firefox

Problem:

Because word-break: break-word is deprecated we are trying to work with hyphens: auto however looks like it doesn't work on Firefox, which has full support for it.

[eduardoj]

Another snippet to reproduce the same issue: https://jsfiddle.net/eduardoj/Lpbsow5r/

[florianlacreuse]

@vpereira See this reduced test case which fix your issue:
https://codepen.io/florianlacreuse/pen/zYOzMLz

@eduardoj Same here for your case:
https://codepen.io/florianlacreuse/pen/JjPJwMw

[ysds]

Because "AAAAAAAAAAAAAAAA ...." is not registered in the hyphenation resource(dictionary).

https://drafts.csswg.org/css-text-3/#hyphenation

Correct automatic hyphenation requires a hyphenation resource appropriate to the language of the text being broken. The UA must therefore only automatically hyphenate text for which the content language is known and for which it has an appropriate hyphenation resource.

Also see:

• https://stackoverflow.com/questions/28976543/css-hyphens-not-working-in-firefox
• https://codepen.io/fellows3/pen/mdbKajr

Closing this since this is not a bug of Bootstrap.