label - 标签上的 CSS 文本溢出

Question

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

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

我怎样才能做到这一点？

Answer 1

label 或 span 默认是内联的。您不能为内联元素设置宽度。所以制作标签内联块

/// 标记

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

这是给你的小提琴 -链接

Answer 3

ellipsis可以在这里使用实用程序类：

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