whitespace:nowrap - how can I truncate the overflowed text - rather than have it expand the element?

Question

This plunker demonstrates what I'm trying and failing to do.

I have some simple HTML:

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

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

I don't want the long labels wrapping, nor do I want them overflowing or expanding the parent element.

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

}

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

How can I acheive this?

I suspect it's actually a difficult problem - as that text is in the DOM and has to go somewhere right?

Answer 1

Is this what you are after?

 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

I'm not sure what exactly you are after here, but if you add:

overflow: hidden;

to your container div then it won't spill over or expand.

Now, I suspect you already know this and want to save your cyan padding-right of 5px. To do this, you need to add your labels to its own separate div with restricted width and then center that in your original container.

Hope this steers you down the right path.

Update with actual code:

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

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