使用css更改屏幕宽度时如何强制换行答案

【问题标题】：How to force line-break when screen width changes using css使用css更改屏幕宽度时如何强制换行
【发布时间】：2022-11-12 06:11:55
【问题描述】：

在我的代码中，我有一个 2 行文本。当屏幕宽度发生变化时，我想将第二个文本 (nth-child(3): 10 x apples) 移动到下面的行。我试过display:block 和white-space:pre。但它没有用，句子没有移动到下一行。我的代码和屏幕截图如下。我应该怎么做才能实现这一目标？

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

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

【问题讨论】：

您还可以提供 HTML 吗？

标签： css sass

【解决方案1】：

您可以将“10 x Apples”包裹在父容器周围并给它：

    .parentContainer::after{
        content: "";
        white-space: pre;
    }

虽然我没有安装 sass，但不知道它是否有效。这只是一个建议，因为它对我有用:)。

【讨论】：

支持换行符，但您不需要在此处包装元素

【解决方案2】：

您正在选择第三个.fruit-detail。

我认为您不能在这里使用display:block，因为“10x”和“Apples”不会并排。

您可以选择第二个跨度并使用:after 添加换行符（或第三个使用:before）

.fruit-detail:nth-child(3) {
  background-color: orange;
}

.fruit-detail span:nth-child(2):after {
  content: "";
  white-space: pre;
}

<div class="fruit-detail">
  <span>"Yesterday"</span>
  <span>Today</span>
  <span> 10 x </span>
  <span>Apples</span>
</div>

<div class="fruit-detail">
  <span>"Yesterday"</span>
  <span>Today</span>
  <span> 10 x </span>
  <span>Strawberries</span>
</div>

<div class="fruit-detail">
  <span>"Yesterday"</span>
  <span>Today</span>
  <span> 10 x </span>
  <span>Bananas</span>
</div>

【讨论】：

感谢您的帮助，但不幸的是，它不适用于我的情况
是你要找的结果吗？您能否提供更多信息以了解为什么它在您的情况下不起作用？
好吧，就我而言，“今天”是第二个孩子，10 x 是第三个孩子，Apples 是第四个孩子。当我尝试您提供的解决方案时，没有任何改变。我不认为他的应用程序受到它的影响
所以它与您提供的 HTML 相同，我使用 Sass on codepen 制作了相同的 sn-p
做了完全相同的事情，但没有，看起来没有做任何改变。

【解决方案3】：

您可以通过为其提供一个类并在您的主 CSS 中设置 display:none; 并在匹配的媒体查询中设置 display: block 来切换中断标签的可见性。

请参阅此示例：https://codepen.io/darshiljani/pen/QWxdqpz

【讨论】：