如何防止单选按钮及其标签之间的换行符，同时仍允许标签本身中的换行符？ [英] How do I prevent line breaks between a radio button and its label, while still allowing line breaks within the label itself?
问题描述
我想确保单选按钮和其相邻标签的开头之间不会有换行符。不过，我想让标签内的文字允许换行。这可能吗？您可以通过呈现以下HTML查看我的失败尝试：
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/>
所以我添加了overflow：hidden，事情稍微好一点，像第二个框在单选按钮及其标签之间有换行符：
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/>
如果我添加< nobr> ;,单选按钮在他们的标签旁边，字符串现在看起来完美。但是，这打破了第一个字符串（具有空格的字符串），因为它不再包装：
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>
推荐答案
首先，移动标签内的单选按钮。这增加了一个很好的功能，您可以通过单击文本选择单选按钮。然后在文本周围添加一个span。
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>
其次，将以下样式添加到您的css：
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.
这篇关于如何防止单选按钮及其标签之间的换行符，同时仍允许标签本身中的换行符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
