title: How do I prevent line breaks between a radio button and its label, while still allowing line breaks within the label itself?
body: <p>I'd like to ensure that there's never a line break between a radio button and the start of its adjacent label. However, I want text <em>within</em> the label to be allowed to wrap. Is this possible? You can see my failed attempts by rendering the following HTML:</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
     &lt;style type="text/css"&gt;
  .box {
    border: solid gray 2px;
    width: 200px;
    margin: 5px;
  }
  .chopped {
    overflow: hidden;
  }
     &lt;/style&gt;
   &lt;/head&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>The boxes need to be fixed-width, so long content needs to be wrapped, as     seen in the first box below. And if someone tries to post a ridiculously     long string without any spaces, we need it to be truncated, rather than     extend beyond the edge of the box -- the problem is visible in the second box:</p>
  
  <pre><code> &lt;div class="box"&gt;
    &lt;input type="radio"/&gt;
    &lt;label&gt;This is a really long string with no spaces&lt;/label&gt;
   &lt;/div&gt;
  
   &lt;div class="box"&gt;
    &lt;input type="radio"/&gt;
    &lt;label&gt;This_is_a_really_long_string_with_no_spaces&lt;/label&gt;
   &lt;/div&gt;
  
   &lt;hr/&gt;
  </code></pre>
  
  <p>So I add "overflow: hidden", and things are somewhat better, but I still     don't like how the second box has a line break between the radio button and     its label:</p>
  
  <pre><code> &lt;div class="chopped box"&gt;
    &lt;input type="radio"/&gt;
    &lt;label&gt;This is a really long string with no spaces&lt;/label&gt;
   &lt;/div&gt;
  
   &lt;div class="chopped box"&gt;
    &lt;input type="radio"/&gt;
    &lt;label&gt;This_is_a_really_long_string_with_no_spaces&lt;/label&gt;
   &lt;/div&gt;
  
   &lt;hr/&gt;
  </code></pre>
  
  <p>If I add &lt;nobr&gt;, the radio buttons are next to their labels, and so     the unspaced string now looks perfect. However, this breaks the first     string (the one with spaces), since it no longer wraps:</p>
  
  <pre><code> &lt;div class="chopped box"&gt;
    &lt;nobr&gt;
      &lt;input type="radio"/&gt;
      &lt;label&gt;This is a really long string with no spaces&lt;/label&gt;
    &lt;/nobr&gt;
   &lt;/div&gt;
   &lt;div class="chopped box"&gt;
    &lt;nobr&gt;
      &lt;input type="radio"/&gt;
      &lt;label&gt;This_is_a_really_long_string_with_no_spaces&lt;/label&gt;
    &lt;/nobr&gt;
   &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>