whitespace：nowrap - 如何截断溢出的文本 - 而不是让它展开元素？

Question

This plunker演示了我正在尝试和未能做到的事情。

我有一些简单的HTML：

<div class = "fixed-width-div"> 
    <label> hello world </label> 
    </div> 

    <div class ="fixed-width-div">   
    <label> adfkldjs sdklfjsdlkfjsdklfkj sdkfjsdlfjlsdkfj lsjdfklsdfjlsdjf lsdjfksdlfjskdf </label> 
    </div> 

我不想长标签包装，我也不想让他们溢出或扩大的父元素。

label { 
    background-color: #ddd; 
    white-space: nowrap; 
    text-overflow: ellipsis; 

} 

.fixed-width-div { 
    width: 100px; 
    background-color: cyan; 
    padding: 5px; 
    margin-top: 15px; 
} 

我该如何实现这个目标？

我怀疑它实际上是一个难题 - 因为该文本是在DOM中，并必须去某个地方吗？

Answer 1

这是你在追求什么？

label { 
 
    background-color: #ddd; 
 
} 
 

 
.fixed-width-div { 
 
    width: 100px; 
 
    background-color: cyan; 
 
    padding: 5px; 
 
    margin-top: 15px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="fixed-width-div"> 
 
    <label>hello world</label> 
 
</div> 
 

 
<div class="fixed-width-div"> 
 
    <label>adfkldjs sdklfjsdlkfjsdklfkj sdkfjsdlfjlsdkfj lsjdfklsdfjlsdjf lsdjfksdlfjskdf</label> 
 
</div>

Answer 2

我不知道你是什么这里经过，但如果添加：

overflow: hidden; 

您div容器，那么它不会溢出或扩大。

现在，我怀疑你已经知道这一点，并希望保存5px的青色填充。为此，您需要将标签添加到自己的宽度有限的独立div，然后将其放在原始容器中。

希望这可以让你走向正确的道路。

更新与实际代码：

.inner-container { 
    width: 95px; 
    overflow: hidden; 
} 

<div class ="fixed-width-div"> 
<div class="inner-container"> 
    <label> adfkldjs sdklfjsdlkfjsdklfkj sdkfjsdlfjlsdkfj lsjdfklsdfjlsdjf lsdjfksdlfjskdf </label> 
</div> 
</div>