我想确保单选按钮和相邻标签的开头之间永远不会有换行符.但是,我希望允许标签内的文本换行.这可能吗？您可以通过呈现以下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/>
如果我添加<nobr>,单选按钮就在它们的标签旁边,因此未空格的字符串现在看起来很完美.但是,这会破坏第一个字符串(带空格的字符串),因为它不再包装:
<div class="chopped box">
<nobr>
<input …