テキストオーバーフロー：親の幅が固定で、子の幅が動的な場合、省略記号は機能しません

Question

親<div>には複数の子spanがあります。親divの幅は固定されていますが、子スパンの幅は動的である可能性があります。私が試したやり方では、テキストが溢れています：省略記号は子供にはうまくいかないようです。

<div class="parent"> 
    <span class="child1"> Content 1</span> 
    <span class="child2"> Content 2</span> 
    <span class="child3"> Content 3</span> 
</div> 


.parent { 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    max-width: 200px; 
    display: inline-block; 
} 

span { 
    display: inline-block; 
} 

JsFiddle。

Answer 1

それは私の推測です。

.parent { 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    max-width: 200px; 
 
    display: inline-block; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <span class="child1"> Content 1</span> 
 
    <span class="child2"> Content 2</span> 
 
    <span class="child3"> Content 3 Content 3 Content 3</span> 
 
</div>

Answer 2

子要素の幅が動的である場合、あなたは自分のスタイルを変更する必要があります。

span { 
    overflow: hidden; 
    text-overflow: ellipsis;  
} 

また、親の表示プロパティを変更する必要がありますフレックス：

.parent { 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    max-width: 200px; 
    display: flex; 
} 

Answer 3

text-overflowinheritedプロパティではありません。つまり、割り当てられた値は親要素（.parent）にのみ適用され、その子（span）には適用されません。

問題を解決するには、そのプロパティを子供に移動するだけです。 （あなたのコンテキストに応じて）たとえば、あなたがそれをこのようにコーディングすることができます。

.parent { 
    border: 1px solid red; 
} 

span { 
    display: inline-block; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    width: 50px; 
    border: 1px solid blue; 
    overflow: hidden; 
} 

Answer 4

             
  
 
   
 
    
.parent { 
 
     max-width: 250px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    } 
 

 
 
    
<div class="parent"> 
 
     <span class="child1"> Content 1</span> 
 
     <span class="child2"> Content 2</span> 
 
     <span class="child3"> Content 3 Content 3 Content 3</span> 
 
    </div>