CODEWITHSUNDEEP
htmlcss
mike
mike

Reputation: 49188

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

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 within the label to be allowed to wrap. Is this possible? You can see my failed attempts by rendering the following HTML:

<html>
 <head>
   <style type="text/css">
.box {
  border: solid gray 2px;
  width: 200px;
  margin: 5px;
}
.chopped {
  overflow: hidden;
}
   </style>
 </head>
<body>

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:

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

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

 <hr/>

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:

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

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

 <hr/>

If I add <nobr>, 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:

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

</body>
</html>

Upvotes: 27

Views: 43871

Answers (5)

Floutsch
Floutsch

Reputation: 41

Sometimes you can't move the tags around because the output is generated beyond your control. So if you can't move the checkbox / radio button into the label you might want to go with:

.box {
    white-space: nowrap;
}
.box label {
    white-space: normal;
}

Upvotes: 0

Yeti
Yeti

Reputation: 2845

The solution provided by JacobM is for this special case ofcourse the best solution. But this problem goes beyond just some radio buttons with their labels. My solution in general:

In line text blabla <span style="white-space: normal;"><element /></span> blabla

Thus as a solution for this specific case, the result would be:

<label>
    <span style="white-space: normal;">
        <input type="radio" />
    </span>
    This_is_a_really_long_string_with_no_spaces
</label>

PS: My situation was an <input /> element inline in wrapping text. The problem was that it would break the line after the element instead of the text at the end of the line. It was really hard to search for this problem using a searchengine, I hope this helps others out.

Upvotes: 1

Jacob Mattison
Jacob Mattison

Reputation: 51052

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.

Upvotes: 55

David Kolar
David Kolar

Reputation: 3485

If you don't mind the less-neat markup, you can get what you want by simply eliminating the white space between the <input> and <label> text.

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

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

(<label>s placed around <input>s per JacobM's suggestion.)

If you want a bit of room between the <input> and the first character of the label, use a non-breaking space (&nbsp;) entity.

Upvotes: 3

bendewey
bendewey

Reputation: 40235

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

Upvotes: 5

Related Questions