相等但动态大小的列，带有省略号 [英] Equal but dynamically-sized columns with overflow ellipsis

问题描述

我从一个四等分的div开始，当它太长时，它允许单行省略.我有两种方法可以做到这一点，第一种是使用表格布局:

I start with a four-equal-column div, which allows single lines that ellipsis when they are too long. I have two ways to do this, the first using a table layout:

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:

And secondly using 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>

在表实例中，当指定外部div的宽度时，此方法效果很好.但是，无论何时删除宽度，均等的列大小都会失败，并且-可能更糟-不会用省略号来修饰溢出.

In the table instance, this works fine for when the outer div is specified a width. But whenever the width is removed the equal column sizing fails and - arguably worse - overflow is not trimmed with an ellipsis.

在flexbox选项中，无论如何它默认为全角.更改为 display:inline-flex 使表变窄，但随后不必要地用省略号将文本剪掉.

In the flexbox option, it defaults to full width anyway. Changing to display: inline-flex makes the table narrower, but then unneccessarily cuts off text with an ellipsis.

如何以小尺寸(适合内容)开始表格，随着内容的增加以相同的方式扩展表格，然后在外部div达到100％宽度时将所有溢出文本都省略掉?(请注意，此宽度不是固定值.)

How do I begin the table at a small size (to fit content), expanding in an equal fashion as content increases, and then ellipsis any overflow text when the outer div reaches 100% width? (Note that this width is not a fixed value.)

这里的其他答案解释说，像上面那样设置各种值将正确地省略号，但是如果可能的话，不要回答如何从较小的表大小开始的问题.

Other answers here explain that setting various values like the above will ellipsis correctly, but don't answer the question of how to initially start at a smaller table size if possible.

推荐答案

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

CSS grid will probably do a better job here:

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>

这篇关于相等但动态大小的列，带有省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！