CODEWITHSUNDEEP
javascripthtmlcssreactjs
embracethefuture
embracethefuture

Reputation: 705

How to keep the content of a span together when resizing window (how to "word-break" at span boundaries)?

In my case, &nbsp doesn't work. I have a span containing a react icon and a number next to it on the right side (think a star icon and a user rating). When I resize my viewport to a certain breakpoint, the number on the right shifts down to a new line, but the icon stays in place. I'd like to make it so that if there isn't enough space for the icon and number to be displayed together on that line, then they both move down to a new line, so that the icon and number are never broken apart.

The code looks something like:

  <p className={styles["key-info"]}>
    <span>
      {release ? release.substring(0, 4) : "Unknown Release Date"}
    </span>
    <span> &#183; {rating}</span>
    <span> &#183; {formatMinutes(runtime)}</span>
    <span>
      {" "}
      &#183; <FaStar className={styles["star-icon"]} />
      {score}
    </span>
  </p>

How do I ensure that my spans are kept together when resizing the window and in particular in the case of the last span, how do I prevent the number on the right (score) from hopping to a new line without the icon, and then the icon hopping down when the window is resized even further? I read somewhere that   should work, but it doesn't.

Hope what I'm asking is pretty clear. If not, I'd be happy to clarify. I should also mention that the thing which is causing the content to break to a new line is the container shrinking. Maybe that's relevant.

Upvotes: 1

Views: 204

Answers (1)

Imanpal Singh
Imanpal Singh

Reputation: 1197

Try putting them under one div

<div class="together">
<FaStar className={styles["star-icon"]} />
      {score}
</div>

and then set the

white-space:nowrap;

Upvotes: 1

Related Questions