How to use "text-overflow: ellipsis" with a label element? [duplicate]

Question

I have a label where I need to add an ellipsis to, but I can't get it to work:

<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

To hide overflow in an element, the element needs to be block-level. But you probably don't want an inline label to be block-level because that could cause other issues. So just make it 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/