'How to truncate the text between the children of a flexbox child?

I understand how to truncate the text which is wrapped inside a flex child however this particular case seems a bit complicated.

enter image description here

The desired behaviour is that the text between the two blue blocks should get truncated to keep them inside the red border.

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid black;
  padding: 10px;
  width: 300px;
}

.block {
    display: inline-block;
    width: 50px;
    height: 50px;
}

.container .left {
    min-width: 0;
    white-space: nowrap;
    padding: 10px;
    border: 1px solid red;
}

.left .label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.left .block {
    background-color: blue;
}

.container .right {
    padding: 10px;
    border: 1px solid blue;
}

.right .block {
    background-color: red;
}
<div class="container">
  <div class="left">
    <div class="block">
    </div>
    
    <div class="label">
      Is this the real life?
    </div>
    
    <div class="block">
    </div>
  </div>
  
  <div class="right">
    <div class="block">
    </div>
  </div>
</div>
htmlcssflexbox


Solution 1:[1]

Is this what you are looking for? Basically i added flexbox property for left and right div

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid black;
  padding: 10px;
  width: 300px;
}

.block {
    display: inline-block;
    width: 50px;
    height: 50px;
}

.left {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    min-width: 0;
    white-space: nowrap;
    padding: 10px;
    border: 1px solid red;
}

.label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.block {
    background-color: blue;
}

.right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid blue;
}

.right .block {
    background-color: red;
}
<div class="container">
  <div class="left">
    <div class="block">
    </div>
    
    <div class="label">
      Is this the real life?
    </div>
    
    <div class="block">
    </div>
  </div>
  
  <div class="right">
    <div class="block">
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Evren

Related Questions