why "text-overflow: ellipsis" property of div not working for its child div

Question

CSS property text-overflow: ellipsis is not working on child div which has class name cluster-name.

.ft-column {
  flex-basis: 0;
  flex-grow: 1;
  padding: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ft-column>.cluster-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="ft-column">
  <div>Cluster</div>
  <div class="pull-left cluster-name">FQDN</div>
</div>

Answer 1

You should give the parent div width so that when the child overflows the width it will trigger the style.This will also work if you give width to the child div but it will hard to manage as the parent is the wrapper so it's better to manage the parent div.

.ft-column {
  flex-basis: 0;
  flex-grow: 1;
  padding: 4px; 
  width: 20%;
}

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

<div class="ft-column">
  <div>Cluster</div>
  <div class="pull-left cluster-name">FQDNsaxaxasxsaxsaxasxvfdvdvfvdfvfd</div>
</div>

Answer 2

.ft-column 
{
 flex-basis: 0;
 flex-grow: 1;
 padding: 4px; 
 text-overflow: ellipsis;
 overflow: hidden
 }
 div.cluster-name {
  white-space: nowrap; 
    width: 2em; 
    overflow: hidden;
    text-overflow: ellipsis; 
   
      
  }

<div class="ft-column">
    <div>Cluster</div>
    <div class="pull-left cluster-name">FQDN</div>
</div>

Define widthfor .cluster-namethen run the code text-overflow: ellipsis; are worked try it now

Answer 3

Please rearrange your CSS as follows, here am adding width to the child.

.ft-column {
  flex-basis: 0;
  flex-grow: 1;
  padding: 4px; 
  text-overflow: ellipsis;
  overflow: hidden
}
.ft-column > .cluster-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
}

<div class="ft-column">
    <div>Cluster</div>
    <div class="pull-left cluster-name">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>