<HTML> <head> <style type="text/CSS">.Box { border: solID gray 2px; wIDth: 200px; margin: 5px;}.chopped { overflow: hIDden;} </style> </head><body> 盒子需要固定宽度,所以长的内容需要包装,如下面的第一个框所示.如果有人试图发布一个没有任何空格的可笑的长字符串,我们需要将其截断,而不是超出框的边缘 – 问题在第二个框中可见：
<div > <input type="radio"/> <label>This is a really long string with no spaces</label> </div> <div > <input type="radio"/> <label>This_is_a_really_long_string_with_no_spaces</label> </div> <hr/>
所以我添加“overflow：hIDden”,事情有点好一些,但是我仍然不喜欢第二个框在单选按钮和它的标签之间有一个换行符：
<div > <input type="radio"/> <label>This is a really long string with no spaces</label> </div> <div > <input type="radio"/> <label>This_is_a_really_long_string_with_no_spaces</label> </div> <hr/>
如果我添加了< nobr>,单选按钮就在它们的标签旁边,所以不间断的字符串现在看起来很完美.但是,这会打破第一个字符串(带空格的字符串),因为它不再包装：
<div > <nobr> <input type="radio"/> <label>This is a really long string with no spaces</label> </nobr> </div> <div > <nobr> <input type="radio"/> <label>This_is_a_really_long_string_with_no_spaces</label> </nobr> </div></body></HTML>解决方法 首先,移动标签内的单选按钮.这增加了一个很好的功能,您可以通过单击文本来选择单选按钮.然后在文本周围添加一个跨度.
<div > <label> <input type="radio"/> <span >This is a really long string with no spaces</span> </label></div><div > <label> <input type="radio"/> <span >This_is_a_really_long_string_with_no_spaces</span> </label></div>
其次,将以下样式添加到您的CSS中：
label { white-space:nowrap;}.wrappable { white-space:normal;} 标签上的白色空间样式可防止单选按钮和文本之间的换行,文本周围的跨度允许它在文本中包装.
总结以上是内存溢出为你收集整理的html – 如何防止单选按钮及其标签之间的换行符,同时仍然允许标签本身中的换行符？全部内容，希望文章能够帮你解决html – 如何防止单选按钮及其标签之间的换行符,同时仍然允许标签本身中的换行符？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）