Html 如何防止单选按钮与其标签之间的换行符，同时仍然允许标签本身内的换行符？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/512695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I prevent line breaks between a radio button and its label, while still allowing line breaks within the label itself?
提问by mike
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 withinthe label to be allowed to wrap. Is this possible? You can see my failed attempts by rendering the following HTML:
我想确保单选按钮与其相邻标签的开头之间永远不会有换行符。但是，我希望允许标签内的文本换行。这可能吗？您可以通过呈现以下 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:
如果我添加 <nobr>，单选按钮就在它们的标签旁边，因此无间距的字符串现在看起来很完美。但是，这会破坏第一个字符串（带空格的字符串），因为它不再换行：
<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>
回答by Jacob Mattison
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:
其次，将以下样式添加到您的 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.
标签上的空白样式可防止单选按钮和文本之间出现换行，文本周围的跨度允许它仅在文本内换行。
回答by bendewey
have you tried white-space:nowrap; inside your .chopped definition?
你有没有试过 white-space:nowrap; 在您的 .chopped 定义中？
回答by David Kolar
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.
如果您不介意不那么整洁的标记，您可以通过简单地消除<input>和<label>文本之间的空白来获得所需的内容。
<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.)
（根据 JacobM 的建议，<label>将 s 放在 s 周围<input>。）
If you want a bit of room between the <input>and the first character of the label, use a non-breaking space ( ) entity.
如果您希望<input>在标签的第一个字符和第一个字符之间留出一点空间，请使用不间断空格 ( ) 实体。
回答by Yeti
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:
JacobM 提供的解决方案对于这种特殊情况当然是最好的解决方案。但是这个问题不仅仅是一些带有标签的单选按钮。我的解决方案一般：
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.
PS：我的情况是<input />包装文本中的内联元素。问题是它会在元素之后断行而不是行尾的文本。使用搜索引擎搜索这个问题真的很难，我希望这可以帮助其他人。
回答by Floutsch
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;
}
