具有溢出省略号的相等但动态大小的列

Question

我从四等列开始 div，它允许单行在太长时省略。我有两种方法可以做到这一点，第一种使用 table 布局：

div.outer {
  display: table;
  table-layout: fixed;
  width: 100%;
}
div.outer > div {
  width: 25%;
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="outer">
  <div style="background-color: tan">Some text</div>
  <div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
  <div style="background-color: tan">More text.</div>
  <div style="background-color: gold">Yet more text.</div>
</div>

然后使用 flexbox:

div.outer {
  display: flex;
}
div.outer > div {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="outer">
  <div style="background-color: tan">Some text</div>
  <div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
  <div style="background-color: tan">More text.</div>
  <div style="background-color: gold">Yet more text.</div>
</div>

在 table 实例中，当外部 div 指定了宽度时，这很好用。但是每当宽度被移除时，相等的列大小调整就会失败，并且 - 可以说更糟 - 溢出不会用省略号修剪。

在 flexbox 选项中，它默认为全宽。更改为 display: inline-flex 会使 table 变窄，但会用省略号不必要地切断文本。

如何以较小的尺寸开始 table（以适合内容），随着内容的增加以相同的方式扩展，然后在外部 div 达到 100 时省略任何溢出文本％宽度？（注意这个宽度不是固定值。）

这里的其他答案解释了像上面这样设置各种值会正确省略，但如果可能的话，不要回答如何以较小的 table 大小开始的问题。

Answer 1

CSS 网格可能会在这里做得更好：

div.outer {
  display: inline-grid; /* fit content */
  grid-auto-flow:column;
  grid-auto-columns:1fr; /* equal column */
  max-width:100%; /* don't go beyond full width */
  margin:10px;
}
div.outer > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="outer">
  <div style="background-color: tan">Some text</div>
  <div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
  <div style="background-color: tan">More text.</div>
  <div style="background-color: gold">Yet more text.</div>
</div>


<div class="outer">
  <div style="background-color: tan">Some text</div>
  <div style="background-color: gold">Some significantly</div>
  <div style="background-color: tan">More text.</div>
  <div style="background-color: gold">Yet more text.</div>
</div>

具有溢出省略号的相等但动态大小的列

Equal but dynamically-sized columns with overflow ellipsis

html

css

flexbox

css-tables