Progress bar text is wonky when <3% and in .card

[jacroe]

When a progress bar is included within a card and its value is less than 3%, the text becomes stacked with the number above the percentage sign. https://jsfiddle.net/gseffeqr/

This is occuring in Chrome, Firefox, and Edge.

[morrissey-ingenious]

you can add the class text-nowrap to the progress-bar to resolve this.

[mdo]

Probably should at the wrapping by default, hmm...

[km1230]

.card has a built-in style {word-wrap: break-word;} that wrap text into next lines.
It is better to add a style {word-wrap: normal;} for your content inside .card to override it.

[MartijnCuppens]

@km1230, that's indeed the reason why the 2% breaks. But if we want to prevent texts like 2% done to break, we should add white-space: nowrap.

[km1230]

@MartijnCuppens, totally agree! That's de facto what I did whenever I use Bootstrap card component. Overriding both word-wrap & white-space to secure the layout!

[MartijnCuppens]

white-space: nowrap; will always prevent word wrapping, so I don't think it would be necessary to add word-wrap: normal;

[MartijnCuppens]

@mdo, if you remove word-wrap: break-word; from .card (#25063), text with spaces will still break in the progress bar. #25248 would fix this.