How to force line-break when screen width changes using css-CodePudding

In my code, I have a 2 lined text. I want to move the second text (nth-child(3): 10 x apples) to the line below when the width of the screen changes. I have tried display:block and white-space:pre. But it didn't work and the sentence did not move to next line. My code and a screenshot is below. What should I do to achieve this?

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

<div >
    <span >
        "Yesterday"
    </span>
    <span >
        Today
    </span>
    <span> 10 x </span>
    <span>Apples</span>
</div>

CodePudding user response：

You could wrap "10 x Apples" around a parent container and give it:

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

Don't know if it works tho, I don't have sass installed. This is just a suggestion because it worked for me :).

CodePudding user response：

You are selecting the third .fruit-detail.

I don't think you can use display:block here because "10x" and "Apples" won't be side by side.

You can select the second span and add a line break with :after (or the third with :before)

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

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

<div >
  <span>"Yesterday"</span>
  <span>Today</span>
  <span> 10 x </span>
  <span>Apples</span>
</div>

<div >
  <span>"Yesterday"</span>
  <span>Today</span>
  <span> 10 x </span>
  <span>Strawberries</span>
</div>

<div >
  <span>"Yesterday"</span>
  <span>Today</span>
  <span> 10 x </span>
  <span>Bananas</span>
</div>