html - 结合显示 :flex, 表和文本溢出的问题:省略号

Question

我在组合(自上而下)display:flex、flex 元素、表格以及包含我想要截断的文本的单元格时遇到问题，而不影响 flex 元素的宽度，也不会插入 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>

Answer 1

你应该切换到其他表格布局算法: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>