子divのために働いていないdivの "text-overflow：省略形"プロパティ

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要素に幅を与えるが、それならば .Thisも動作しますスタイルをトリガするようにするには、親のdiv widthを与える必要があります親がラッパーなので管理しにくいので、親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>

follとして、あなたのCSSを再配置してください今

Answer 3

を試してみてくださいtext-overflow: ellipsis;が働いているコードを実行し.cluster-nameためwidthを定義しますこんにちは、ここでは子供に幅を追加しています。

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