空白：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>