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

问题

This question already has an answer here:

apply ellipsis when label text is overflow (1 answer)

Closed 5 years ago.

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

回答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/

来源：https://stackoverflow.com/questions/25881293/how-to-use-text-overflow-ellipsis-with-a-label-element