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

并显示预期内容，如下面的snap shot所示。

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

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

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

这是什么解决方案？每个带有标签的复选框都应该在块中的直线中显示，而不管标签文本的长度。

Answer 1

使用CSS属性white-space: nowrap;，例如My Fiddle

预览

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/