html - 使用 div 在块中显示复选框

Question

我正在尝试在一个块中显示复选框，如下所示。

<div style="overflow: auto; width: 145px; background-color: #FFF; height: 80px; border: 1px double #336699; padding-left: 2px;">
    <label for="chk1"><input type="checkbox" id="chk1" name="chk_param">xxxx</label><br/>
    <label for="chk2"><input type="checkbox" id="chk2" name="chk_param">aaaa</label><br/>
    <label for="chk3"><input type="checkbox" id="chk3" name="chk_param">aaaa</label><br/>
    <label for="chk4"><input type="checkbox" id="chk4" name="chk_param">aaaa</label><br/>
    <label for="chk5"><input type="checkbox" id="chk5" name="chk_param">aaaa</label><br/>
    <label for="chk6"><input type="checkbox" id="chk6" name="chk_param">aaaa</label><br/>
    <label for="chk7"><input type="checkbox" id="chk7" name="chk_param">aaaa</label><br/>
    <label for="chk8"><input type="checkbox" id="chk8" name="chk_param">aaaa</label><br/>
</div>

它会显示预期的内容，如以下快照所示。

当任何一个（或多个）复选框标签长于指定宽度时，会出现一个水平滚动条，这是预期的，但它会在复选框下方显示复选框标签文本，如下面的快照所示。

在这种情况下，一个（或多个）复选框标签非常长，如下所示。

<label for="chk1">
  <input type="checkbox" id="chk1" name="chk_param">xxxxxxxxxxxxxxxxxxxxxxxxxxxx
</label><br/>

解决方案是什么？无论标签文本有多长，每个带有标签的复选框都应在块内以直线显示。

Answer 1

white-space: nowrap;使用像My Fiddle这样的CSS 属性

预览

HTML

<div style="overflow: auto; width: 145px; background-color: #FFF; height: 80px; border: 1px double #336699; padding-left: 2px;">
    <label for="chk1"><input type="checkbox" id="chk1" name="chk_param">xxxxxxxxxxxxxxxxxxxxxxxxxx</label><br/>
    <label for="chk2"><input type="checkbox" id="chk2" name="chk_param">aaaa</label><br/>
    <label for="chk3"><input type="checkbox" id="chk3" name="chk_param">aaaa</label><br/>
    <label for="chk4"><input type="checkbox" id="chk4" name="chk_param">aaaa</label><br/>
    <label for="chk5"><input type="checkbox" id="chk5" name="chk_param">aaaa</label><br/>
    <label for="chk6"><input type="checkbox" id="chk6" name="chk_param">aaaa</label><br/>
    <label for="chk7"><input type="checkbox" id="chk7" name="chk_param">aaaa</label><br/>
    <label for="chk8"><input type="checkbox" id="chk8" name="chk_param">aaaa</label><br/>
</div>​

CSS

label {
   white-space:nowrap;
}​

Answer 2

您可以将这 5 个 css 属性添加到标签中：

label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

http://jsfiddle.net/USDKK/