如何使用＆＃34;文本溢出：省略号＆＃34;带有标签元素？

Question

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

<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

Answer 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/