当屏幕变小时如何使用 CSS 在下一行包装整组元素？

Question

On big screens, like desktops, it would look like this:

But in smaller screens or when zoomed in, I want my multiple lines to wrap like this:

I tried this:

 .tab__set { display: block; font-size: 1.2em; font-family: monospace; overflow: hidden; border: 1px solid; resize: horizontal; }.tab { min-height: 1.2rem; display: block; white-space: wrap; }

 <span class="tab__set"> <span class="tab">e|------------------------|----------------------------|----------------------|-------------</span> <span class="tab">B|------------------------|-------2h3p2----5-----5--2--|------2-----2-----2---|---3-----3---</span> <span class="tab">G|------------------------|----2--------2--4-----4--2--|------2-----2-----2---|---2-----2---</span> <span class="tab">D|------------------------|----------------------------|----------------------|-------------</span> <span class="tab">A|------------------------|-0--------------------------|----------------------|-------------</span> <span class="tab">E|--------------------0h2-|----------------4--4-----2--|---2-----2--0--0-----0|---2--2-----2</span> </span>

Above, I tried using white-space: wrap; but the result is not what I desire. It doesn't wrap as a whole set of tabs like what it did on the second image above. Instead, it just wraps as individual elements.

Then I tried using white-space: nowrap; and of course that doesn't work because it will not show all the tabs unless I scroll horizontally. I don't know how to make multiple elements go on a new line as a whole group. Please help.

---

Answer 1

From my old answer and in case the number of lines is known you can approximate like below:

 .tab__set { --s:1.2em; --n:6; font-size: var(--s); line-height: calc((var(--n) + 1)*var(--s)); font-family: monospace; position:relative; /* to illustrate */ overflow: hidden; border: 1px solid; resize: horizontal; word-break:break-all; }.tab__set.tab { display:block; transform:translateY(calc(-1*var(--n)*var(--s)/2)) }.tab__set.tab:not(:first-child) { position: absolute; top: 0; left: 0; right: 0; }.tab__set.tab:nth-child(2) {top:calc(1*var(--s));}.tab__set.tab:nth-child(3) {top:calc(2*var(--s));}.tab__set.tab:nth-child(4) {top:calc(3*var(--s));}.tab__set.tab:nth-child(5) {top:calc(4*var(--s));}.tab__set.tab:nth-child(6) {top:calc(5*var(--s));} /*.tab__set.tab:nth-child(N) {top:calc((N - 1)*var(--s));}

 <div class="tab__set"> <span class="tab">e|------------------------|----------------------------|----------------------|------------</span> <span class="tab">B|------------------------|-------2h3p2----5-----5--2--|------2-----2-----2---|---3-----3---</span> <span class="tab">G|------------------------|----2--------2--4-----4--2--|------2-----2-----2---|---2-----2---</span> <span class="tab">D|------------------------|----------------------------|----------------------|-------------</span> <span class="tab">A|------------------------|-0--------------------------|----------------------|-------------</span> <span class="tab">E|--------------------0h2-|----------------4--4-----2--|---2-----2--0--0-----0|---2--2-----2</span> </div>