如何防止单选按钮与其标签之间的换行，同时仍允许在标签本身内换行？
如何防止单选按钮与其标签之间的换行，同时仍允许在标签本身内换行？
提问于 2009-02-04 18:39:56
我希望确保单选按钮和其相邻标签的开头之间永远不会有换行。但是，我希望标签中的文本可以换行。这个是可能的吗？您可以通过呈现以下HTML来查看我失败的尝试：
<html>
<head>
<style type="text/css">
.box {
border: solid gray 2px;
width: 200px;
margin: 5px;
}
.chopped {
overflow: hidden;
}
</style>
</head>
<body>方框需要固定宽度，因此需要包装较长的内容，如下面的第一个方框所示。如果有人试图发布一个没有任何空格的非常长的字符串，我们需要将其截断，而不是延伸到框的边缘--问题在第二个框中可见：
<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"，事情变得更好了，但我仍然不喜欢第二个框在单选按钮和标签之间有一个换行符：
<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/>如果我添加，单选按钮就在它们的标签旁边，所以现在没有空格的字符串看起来很完美。但是，这会中断第一个字符串(带空格的字符串)，因为它不再换行：
<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>回答 5
Stack Overflow用户
回答已采纳
发布于 2009-02-04 18:55:15
首先，移动标签内的单选按钮。这添加了一个很好的功能，您可以通过单击文本来选择单选按钮。然后在文本周围添加跨度。
<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中：
label {
white-space:nowrap;
}
.wrappable {
white-space:normal;
}标签上的空白样式防止了单选按钮和文本之间的换行，文本周围的跨度允许它仅在文本内换行。
Stack Overflow用户
发布于 2009-02-04 18:54:02
您是否尝试过在.chopped定义中使用空格:nowrap；？
Stack Overflow用户
发布于 2009-02-04 19:11:57
如果您不介意不太整洁的标记，您可以通过简单地消除<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>(根据雅各布M的建议，在<input>周围放置<label>。)
如果希望在<input>和标签的第一个字符之间留出一点空间，请使用不间断空格( )实体。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/512695
复制相关文章
相似问题