为什么div的“text-overflow：ellipsis”属性不适用于其子div

Question

CSS属性text-overflow: ellipsis不适用于具有类名cluster-name的子div。

.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

你应该给父div width，这样当孩子溢出宽度时它会触发样式。如果你给子div提供宽度，这也会有用。难以管理，因为父母是包装器所以最好来管理父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>

为width定义.cluster-name，然后运行代码text-overflow: ellipsis;，请立即尝试

Answer 3

请按照以下方式重新排列CSS，这里是为孩子增加宽度。

.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>