我想确保一个单选按钮和其相邻标签的开始之间绝对没有中断.但是,我想让标签内的文本被允许包装.这可能吗？您可以通过呈现以下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 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>
解决方法
首先,移动标签内的单选按钮.这增加了一个很好的功能,您可以通过单击文本来选择单选按钮.然后在文本周围添加一个跨度.
<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;
}
标签上的白色空间样式可防止单选按钮和文本之间的换行,文本周围的跨度允许它在文本中包装.
