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>