如何在label元素中使用"text-overflow: ellipsis"？

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

- Steve

---

需要使用display: block或者inline-block才能生效，因为标签默认是内联元素，省略号只对块级元素有效。 - Harry

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/

- Nathan