结合 display:flex、tables 和 text-overflow 的问题：省略号

Question

我在组合（自上而下）display: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>

Answer 1

您应该切换到其他表格布局算法：table-layout: fixed，这种算法按照作者（您）所说的去做，并且不会尝试自动适应内容。如果您在设置宽度时遇到问题，请尝试将它们设置在第一行。
此外，单元格上的max-width 属性对AFAIK 无效。糟糕，不，它是undefined behavior。我把它改成了width: 55%，这在SO上还不错，但我猜你的页面比这里的sn-ps大，所以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>