How to prevent text overflow when using Angular UI Bootstrap

Question

I'm working on set of checkboxes, displayed using Angular UI Bootstraps button set.

What I've tried:

1. I've tried using the 'white-space' css declaration, but it did not help.

2. I've also tried changing the individual buttons out from <label> to both <div> & <a>

Neither of these solved the issue of overflowing text.

How can I easily prevent the text from overflowing here?

JSFiddle: https://jsfiddle.net/03ujphxg/

If you shrink the width of the right-handed column, while it may not be easy to see due to the placement of the resulting display, you'll see the text overflow.

Notes: I can not (prefer not to) set specific width or heights on the button elements.

Answer 1

You probably need to be more specific with your CSS rule to override .btn's white-space property.

label.btn {
  white-space: normal;
}

Or you could add another container inside your buttons and give that the white-space property.

<label class="btn btn-default">
    <span style="white-space: normal">
        <input type="checkbox">
        Connections / Hoses Leaking or Cracked Connections / Hoses Leaking or Cracked
    </span>
</label>