Question

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

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

我该怎么做？

Answer 1

标签或范围默认为内联。您无法在内联元素上设置宽度。所以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;
    }

这是你的小提琴 - link

Answer 3

可以在此处使用实用程序类ellipsis：

.ellipsis {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

标签上的CSS文本溢出

3 个答案: