如何使用“文本溢出:省略号"?带有标签元素? [英] How to use "text-overflow: ellipsis" with a label element?

问题描述

我有一个标签，需要在其中添加省略号，但无法正常使用:

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

推荐答案

要隐藏元素中的溢出，该元素必须是块级的.但是您可能不希望将内联标签设为块级，因为这可能会导致其他问题.因此，只需将其设为inline-block:

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/

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

这篇关于如何使用“文本溢出:省略号"?带有标签元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！