Equal But Dynamically-sized Columns With Overflow Ellipsis

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: And secondly usin

Solution 1:

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>