フレックス、テーブル、テキストオーバーフロー：省略記号

Question

display:flex、フレックスアイテム、テーブル、そして次に切り捨てたいテキストを含むセルに、フレックスアイテムの外側にテーブルを押したりすることもありません。

フレックスアイテム内のinline-blockに配置するとテキストを切り詰めても問題ありませんが、2つの間にテーブル/行/セルを置くと、テーブルがうまく行きます。

私はSetting ellipsis on text from a flex containerを見てきましたが、それはtable要素を考慮していません。また、CSS Tricksの例もありません。私はこれらの参考文献を使用してflexboxesを設定しました。 table-layout: fixed、作者（あなたが）言うことありません1：あなたは他テーブルレイアウトアルゴリズムに切り替える必要があり

/* flex layout */ 
 
.flex-space-between { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.flex-space-between > div { 
 
    width:100%; 
 
    flex: 1 1 auto; 
 
} 
 
.flex-with-gap { margin: -14px -7px; } 
 
.flex-with-gap > div { margin: 14px 7px; } 
 

 

 
/* colouring and other styles */ 
 
.flex-space-between > div { 
 
    box-sizing:border-box; 
 
    background-color:white; 
 
    border: solid 1px #999; 
 
    padding: 0.5em;min-width: 0; 
 
} 
 
body { font-family: sans-serif } 
 

 
.truncate { 
 
    width:100%; 
 
    display: inline-block; 
 
    color:red; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.t1 { 
 
    width: 100%; 
 
    border-collapse:collapse; 
 
} 
 
.t1 TD, .t1 TH { 
 
    border:1px dotted blue; 
 
} 
 
.t1 TH { 
 
    text-align:left; 
 
    font-weight:normal; 
 
} 
 
.t1 .number { 
 
    text-align:right; 
 
    font-size: 180%; 
 
    color:#66F;font-weight:bold; 
 
} 
 
.t1 .text { 
 
    max-width:80%; 
 
} 
 

 
.info { color: blue; font-style:italic;}

<div class='flex-space-between flex-with-gap'> 
 
    <div> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    <p class='info'>The div.truncate element above truncates fine.</p> 
 
    </div> 
 
    
 
    <div> 
 
    <div class='flex-space-between'> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    </div> 
 
    <p class='info'>So do the above which are contained inside sub-flexboxes.</p> 
 
    </div> 
 

 
    <div></div> 
 
    <div></div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div></div> 
 
    <div> 
 
    <table class='t1'> 
 
    <tr> 
 
    <th class='text'>Locations</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Divisions</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Business Units Business Units Business Units</th> 
 
    <td class='number'>80</td> 
 
    </tr> 
 
    </table> 
 
    <p class='info'>Now, I'm wanting to place a small table in my flex items as above (lists of text and numeric values) but I want the text (e.g. Business Units) to truncate if has to, and not wrap.</p> 
 
    </div> 
 
    
 
    <div> 
 
    <table class='t1'> 
 
    <tr> 
 
    <th class='text'>Locations</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Divisions</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'><div class='truncate'>Business Units Business Units Business Units</div></th> 
 
    <td class='number'>80</td> 
 
    </tr> 
 
    </table> 
 
    <p class='info'>But this is what now happens when trucating. The "white-space: nowrap;" kicks in but not the "overflow: hidden;" nor "text-overflow: ellipsis;".</p> 
 
    <p class='info'> 
 
    I think truncating text inside a TD/TH is the problem but not sure why. 
 
    </p> 
 
    </div> 
 
    <div style='opacity:0.9'></div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>100%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>33%</div><div>33%</div><div>33%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>50%<br>Multi-line line</div><div>50%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>25%</div><div>25%</div><div>25%</div><div>25%</div> 
 
</div>

Answer 1

：ここ

はまた私のJSFiddle例とあります自動的にコンテンツに適応しようとはしません。幅の設定に問題がある場合は、最初の行に設定してみてください。
max-widthセルのプロパティはAFAIKに影響しません。おっと、それはundefined behaviorです。私はこれをwidth: 55%に変更しました。ここではまあまあですが、あなたのページはYMMVのスニペットよりも大きいと思います。

/* flex layout */ 
 
.flex-space-between { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.flex-space-between > div { 
 
    width:100%; 
 
    flex: 1 1 auto; 
 
} 
 
.flex-with-gap { margin: -14px -7px; } 
 
.flex-with-gap > div { margin: 14px 7px; } 
 

 

 
/* colouring and other styles */ 
 
.flex-space-between > div { 
 
    box-sizing:border-box; 
 
    background-color:white; 
 
    border: solid 1px #999; 
 
    padding: 0.5em;min-width: 0; 
 
} 
 
body { font-family: sans-serif } 
 

 
.truncate { 
 
    width:100%; 
 
    display: inline-block; 
 
    color:red; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.t1 { 
 
    width: 100%; 
 
    border-collapse:collapse; 
 
    table-layout: fixed; 
 
} 
 
.t1 TD, .t1 TH { 
 
    border:1px dotted blue; 
 
} 
 
.t1 TH { 
 
    text-align:left; 
 
    font-weight:normal; 
 
} 
 
.t1 .number { 
 
    text-align:right; 
 
    font-size: 180%; 
 
    color:#66F;font-weight:bold; 
 
} 
 
.t1 .text { 
 
    width: 55%; 
 
    background: yellow; 
 
} 
 

 
.info { color: blue; font-style:italic;}

<div class='flex-space-between flex-with-gap'> 
 
    <div> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    <p class='info'>The div.truncate element above truncates fine.</p> 
 
    </div> 
 
    
 
    <div> 
 
    <div class='flex-space-between'> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    </div> 
 
    <p class='info'>So do the above which are contained inside sub-flexboxes.</p> 
 
    </div> 
 

 
    <div></div> 
 
    <div></div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div></div> 
 
    <div> 
 
    <table class='t1'> 
 
    <tr> 
 
    <th class='text'>Locations</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Divisions</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Business Units Business Units Business Units</th> 
 
    <td class='number'>80</td> 
 
    </tr> 
 
    </table> 
 
    <p class='info'>Now, I'm wanting to place a small table in my flex items as above (lists of text and numeric values) but I want the text (e.g. Business Units) to truncate if has to, and not wrap.</p> 
 
    </div> 
 
    
 
    <div> 
 
    <table class='t1'> 
 
    <tr> 
 
    <th class='text'>Locations</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Divisions</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'><div class='truncate'>Business Units Business Units Business Units</div></th> 
 
    <td class='number'>80</td> 
 
    </tr> 
 
    </table> 
 
    <p class='info'>But this is what now happens when trucating. The "white-space: nowrap;" kicks in but not the "overflow: hidden;" nor "text-overflow: ellipsis;".</p> 
 
    <p class='info'> 
 
    I think truncating text inside a TD/TH is the problem but not sure why. 
 
    </p> 
 
    </div> 
 
    <div style='opacity:0.9'></div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>100%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>33%</div><div>33%</div><div>33%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>50%<br>Multi-line line</div><div>50%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>25%</div><div>25%</div><div>25%</div><div>25%</div> 
 
</div>