Fix overflowing text in Cards with word-wrap: break-word

[pat270]

Demo: https://jsfiddle.net/4h6okLkn/2/

Long text with no whitespace overflow in cards, this fix should cover most long text in cards. I used word-wrap: break-word instead of word-break: break-all because it breaks up the words a little bit better.

[mdo]

I feel like adding this to the entire card would be overdoing it. How does this interact with more complex card contexts, subcomponents, etc? Wondering if it'd be better to make this an easier utility or apply it to multiple card classes.

[pat270]

Hey @mdo,

I think having it on the entire card is the right thing to do. It makes all the card sub components function like they should e.g. .card-groups and .card-decks retain equal widths even with long text. .card-columns also works like it should.

It wasn't working in some of the sub components because I missed adding min-width: 0 to .card so the browser uses the card's width instead of the content's width when deciding if it should break-word.