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;
}

<divclass="outer"><divstyle="background-color: tan">Some text</div><divstyle="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><divstyle="background-color: tan">More text.</div><divstyle="background-color: gold">Yet more text.</div></div><divclass="outer"><divstyle="background-color: tan">Some text</div><divstyle="background-color: gold">Some significantly</div><divstyle="background-color: tan">More text.</div><divstyle="background-color: gold">Yet more text.</div></div>