add .text-wrap class

[browner12]

this is the opposite of .text-nowrap, and a forces elements to wrap onto new lines.

One use case for this is extra long button text. Bootstrap buttons by default do no wrap, so this class could be used to override that behavior.

references issue #19315

[MartijnCuppens]

Hi @browner12,

There is a difference between white-space: normal and word-wrap: break-word; or hyphens: auto;. The utility class you provide doesn't do the same as was done in the ticket you're referring to.

Bootstrap buttons by default do no wrap

This has been changed lately: 24bdadf#diff-8a4fc4262c9197c73b80fb80d8863ae5

So at the moment there's not really a reason to add this I think.

[browner12]

The reason I stuck with white-space here is because that's what .text-nowrap uses, so IMO .text-wrap should be the opposite.

Even though without the button behavior, I think this is a good small complement to the existing utility class.

[MartijnCuppens]

I'm not fully convinced yet. Could you maybe provide a demo to show its use-case?

[browner12]

There are other components in Bootstrap that by default have a white-space: nowrap;. Badges, dropdown items, navbar brands, and progress bars. A user could also have some custom classes in their code that employ a nowrap.

This class would allow users to override that behavior on an individual basis.

<div style="width: 100px; border: 1px solid red; ">
    <div class="badge badge-primary text-wrap">testing a very long badge name</div>
    <div class="badge badge-primary">testing a very long badge name</div>
</div>

<style>
    .text-wrap {
        white-space: normal;
    }
</style>

[XhmikosR]

Shouldn't we add this in docs too?

[MartijnCuppens]

Yes we should add this to the docs.

[XhmikosR]

@MartijnCuppens: I made the changes, have a look again and then I'll clean the branch and merge.

[MartijnCuppens]

white-space: normal is the default behaviour, so I've changed the example to a badge, which makes it clear that this class can be used to override style set in css.

[browner12]

thanks guys!