标签上的CSS文本溢出

Question

对于我的网站,我有一个复选框,旁边有一个标签,但如果标签中的文字长于例如60px,我想切断文字.

我知道text-overflow: clip,这确实是我想要的,但由于某种原因,它不适用于标签.而使用div并不是一个非常好的解决方案,因为你不能点击文本来选择复选框.

我怎样才能做到这一点？

Answer 1

默认情况下,label或span是内联的.您无法在内联元素上设置宽度.所以make label inline-block

///标记

<input type="checkbox"/> <label style="display: inline-block; width: 60px; overflow: hidden">Sample text sample text</label>

Answer 2

vertical-align: middle这里提供了一个很好的解决方案,可以将标签与复选框对齐,并在末尾text-overflow: ellipsis用三个点剪切文本....

以下代码段显示了一个示例:

HTML:   
<input type="checkbox"/> 
    <label>Pretty awesome label to describe the uber cool checkbox. </label>

CSS:
    label {
      text-overflow: ellipsis;
      display: inline-block;
      overflow: hidden;
      width: 300px;
      white-space: nowrap;
      vertical-align: middle;
    }

这是你的小提琴 - 链接