Menu
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> 
596
Use white-space: nowrap; or give that link more space by setting li 's width to greater values. I prevented line break in li items using display: inline; . Maybe this will also help others with similar problems. Its important to be careful with display: inline as it can have side effects.
To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag.
You can use break <br> tag to create spacing between two or a group radio buttons. The break <br> tag inserts a single line break between two html elements.
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.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
