如何使用CSS在屏幕宽度变化时强制指定元素换行？

我想让页面中的一段文本在屏幕宽度变化时，将第二部分（对应:nth-child(3)的「10 x」及后续的「Apples」）移至下一行。尝试使用display:block和white-space:pre属性后，文本并未换行，附上代码及截图，求解决方法。

HTML代码 #

<div class="fruit-detail">
    <span class="day-one ng-star-inserted">
        "Yesterday"
    </span>
    <span class="ng-star-inserted">
        Today
    </span>
    <span> 10 x </span>
    <span>Apples</span>
</div>

CSS代码 #

@media (min-width: breakpoint-max(sm)) {
  .fruit-detail {
    & :nth-child(3) {
        display: block;
    }
  }
}

效果截图 #

你之前的做法只给第3个<span>设置了display:block，但「Apples」是第4个独立的行内元素，依然会跟在第3个元素后面，所以没达到换行效果。这里提供几种可行的解决方式：

方法1：选中第3个及之后的所有元素设置块级显示 #

修改CSS，同时选中第3个及之后的所有<span>，并注意媒体查询的逻辑（如果是小屏幕换行，应该用max-width而非min-width）：

@media (max-width: breakpoint-max(sm)) {
  .fruit-detail span:nth-child(n+3) {
    display: block;
  }
}

这样「10 x」和「Apples」都会变成块级元素，各自占一行；如果想让它们在同一行但整体换行，看方法2。

方法2：包裹目标元素为整体 #

调整HTML结构，把「10 x」和「Apples」放到同一个容器里，再给容器设置块级显示：

<div class="fruit-detail">
    <span class="day-one ng-star-inserted">
        "Yesterday"
    </span>
    <span class="ng-star-inserted">
        Today
    </span>
    <div class="fruit-group">
        <span> 10 x </span>
        <span>Apples</span>
    </div>
</div>

对应的CSS：

@media (max-width: breakpoint-max(sm)) {
  .fruit-detail .fruit-group {
    display: block;
  }
}

这种方式能让两个元素作为整体换行，布局更规整。

方法3：用Flex布局强制换行 #

给父容器设置Flex布局，通过flex-basis:100%让第3个元素强制换行，无需修改HTML：

.fruit-detail {
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: breakpoint-max(sm)) {
  .fruit-detail span:nth-child(3) {
    flex-basis: 100%;
  }
}

第3个元素占满一行宽度，后续元素自然会换到下一行，同时「10 x」和「Apples」也能保持在同一行。

内容的提问来源于stack exchange，提问作者TreacleMark