我遇到了一个问题：组合（自上而下）display:flex，弹性项目，表格，然后是包含我要截断的文本的单元格而不影响弹性项目的宽度，也没有将表格推到flex项目。
如果放置在弹性项目内的inline-block内，截断文本可以正常工作，但当我在两者之间放置一个表/行/单元格时，表格会变得混乱。
我查看了Setting ellipsis on text from a flex container，但这不考虑table个元素，也不考虑CSS Tricks示例。我还使用这些引用来设置我的flexboxes。
这是我的JSFiddle示例以及：
/* 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>
答案 0 :(得分：1)
您应该切换到其他表格布局算法：table-layout: fixed，即做作者（您）所说的内容并且不会尝试自动适应内容。如果您在设置宽度时遇到问题，请尝试在第一行设置它们
细胞上的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>