How do I prevent line breaks between a radio button and its label, while still allowing line breaks within the label itself?

First, move the radio buttons inside your labels. This adds the nice feature that you can select the radio buttons by clicking the text. Then add a span around the text.

<div class="chopped box">
 <label>
  <input type="radio"/>
  <span class="wrappable">This is a really long string with no spaces</span>
 </label>
</div>

<div class="chopped box">
 <label>
  <input type="radio"/>
  <span class="wrappable">This_is_a_really_long_string_with_no_spaces</span>
 </label>
</div>

Second, add the following style to your css:

label {
    white-space:nowrap;
}

.wrappable {
    white-space:normal;
}

The white-space style on the label prevents the linebreak between the radio button and the text, and the span around the text allows it to wrap just within the text.


have you tried white-space:nowrap; inside your .chopped definition?

Tags:

Html

Css