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

问题描述

在大屏幕(如台式机)上，它看起来像这样:

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:

我尝试过:

.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>

上面，我尝试使用 white-space:wrap; ，但是结果不是我想要的.它没有像上面的第二张图片那样包装整个选项卡.相反，它只是包装为单独的元素.

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.

然后我尝试使用 white-space:nowrap; ，这当然是行不通的，因为除非我水平滚动，否则它不会显示所有选项卡.我不知道如何将多个元素作为一个整体放在一个新的一行上.请帮忙.

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.

推荐答案

从我的旧答案行数已知，您可以近似如下:

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>

这篇关于当屏幕变小时如何使用CSS将整组元素包装在下一行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！