如何将“文本溢出：省略号”与标签元素一起使用？ [复制]答案

【问题标题】：How to use "text-overflow: ellipsis" with a label element? [duplicate]如何将“文本溢出：省略号”与标签元素一起使用？ [复制]
【发布时间】：2014-09-17 10:34:04
【问题描述】：

我有一个需要在其中添加省略号的标签，但我无法让它工作：

<label id="div2">This is some long text that will not fit in the box</label>

label#div2 {
    white-space: nowrap; 
    width: 30px; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

JSFiddle

【问题讨论】：

需要display: block 或inline-block 才能工作，因为默认情况下标签是内联元素，而省略号仅适用于块级元素。

标签： html css label

【解决方案1】：

要隐藏元素中的溢出，元素需要是块级的。但是您可能不希望内联标签是块级的，因为这可能会导致其他问题。所以就让它inline-block:

label#cats {
    white-space: nowrap; 
    width: 30px; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
    display: inline-block;
}

jsFiddle：http://jsfiddle.net/rdg221bx/1/

【讨论】：