display:flex、表格和文本溢出的问题：省略号

Question

我在合并（自上而下）display:flex、flex 项目、table 以及包含我想要截断的文本的单元格时遇到问题，但不会影响 flex 项目的宽度，也不将 table 推到弹性项目之外。

如果放置在 flex 项目内的 inline-block 中，截断文本工作正常，但是当我坐在两者之间的 table/row/cell 时，table 变得混乱。

我看过 , but that doesn't consider table elements, nor does this CSS Tricks example. I've also used these references to set up my 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

你应该切换到 other table 布局算法：table-layout: fixed尝试自动适应内容。如果您在设置宽度时遇到问题，请尝试将它们设置在第一行。
此外 max-width 属性对细胞没有影响 AFAIK。糟糕，不，是 undefined behavior。我将其更改为 width: 55% 这在 SO 上还不错，但我猜你的页面比这里的片段大所以 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>

display:flex、表格和文本溢出的问题：省略号

Issues combining display:flex, tables, and text-overflow: ellipsis

html

css

ellipsis

flexbox