Line count

How many lines a row of widths takes when it wraps at a given width.

In CSS, a wrapping flex row puts items on a line until the next one doesn’t fit, then starts a new one. With every item 10px tall, the row is 10px times the number of lines; a query container before it, in the same grid row, is as tall and reads its height.

Example

Result
Markup
<div class="line-count">
  <b><output></output></b>
  <div>
    <i style="--value: 180"></i>
    <i style="--value: 180"></i>
    <i style="--value: 120"></i>
    <i style="--value: 120"></i>
  </div>
</div>
CSS
@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.line-count output::after { counter-reset: result var(--result); content: counter(result); }
.line-count { display: inline-grid; align-content: start; grid-template-columns: 4em 300px; }
.line-count > div { display: flex; flex-wrap: wrap; }
.line-count > div > i { flex: none; width: calc(var(--value) * 1px); height: 10px; }
.line-count > b { container-type: size; }
.line-count > b > output { --result: round(100cqh / 10px); }

Limits

  • items of one height (10px here): the row’s height divided by it is the count
  • the wrapping width written as the row’s grid track (300px here), in each grid’s own rule: rows of different widths on one page need a class each
  • no gap between the lines or the items, and items that do not flex
  • a query container with container-type: size in the row’s grid row, with no padding above or below
  • the row as tall as the wrapping row: a grid held taller stretches its row, and the read with it (align-content: start here)
  • no other registration of --result on the page: a later @property --result that doesn’t inherit leaves the read right and the counter at 0

Browser support

ChromeSafariFirefox
Example14026158

Each row gives the first versions that support every feature its example uses, by MDN’s browser-compat-data. The Example was run in Chrome 155, Safari’s WebKit 26.4 and Firefox 158.