Question

我想确保单选按钮和相邻标签的开头之间永远不会有换行符。但是，我希望标签中的文本允许包装。这可能吗？您可以通过呈现以下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/>

如果我添加＆lt; nobr＆gt;，单选按钮就在它们的标签旁边，因此未间隔的字符串现在看起来很完美。但是，这会破坏第一个字符串（带空格的字符串），因为它不再包装：

<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>

Answer 1

首先，移动标签内的单选按钮。这增加了一个很好的功能，您可以通过单击文本选择单选按钮。然后在文本周围添加一个范围。

<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;
}

标签上的空白样式可以防止单选按钮和文本之间的换行符，文本周围的跨度允许它在文本中包装。

Answer 2

你试过白空间吗：nowrap;你的.chopped定义？

Answer 3

如果您不介意不太整洁的标记，只需消除<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>

（根据JacobM的建议，<label>位于<input> s附近。）

如果您想在<input>和标签的第一个字符之间留出一点空间，请使用不间断的空格（ ）实体。

Answer 4

JacobM提供的解决方案是针对这种特殊情况的最佳解决方案。但是这个问题超出了一些带标签的单选按钮。我的解决方案一般：

In line text blabla <span style="white-space: normal;"><element /></span> blabla

因此，作为这种特定情况的解决方案，结果将是：

<label>
    <span style="white-space: normal;">
        <input type="radio" />
    </span>
    This_is_a_really_long_string_with_no_spaces
</label>

PS：我的情况是包装文本的内联<input />元素。问题是它会破坏元素之后的行而不是行尾的文本。使用searchengine搜索这个问题真的很难，我希望这能帮助其他人。

Answer 5

有时候，您无法移动标签，因为生成的输出超出了您的控制范围。因此，如果您不能将复选框/单选按钮移到标签中，则可能要使用：

.box {
    white-space: nowrap;
}
.box label {
    white-space: normal;
}

如何防止单选按钮与其标签之间的换行，同时仍允许标签内的换行？

5 个答案: