调整窗口大小时如何将跨度的内容保持在一起（如何在跨度边界处“断字”）？

Posted 2023-03-05

【中文标题】调整窗口大小时如何将跨度的内容保持在一起（如何在跨度边界处“断字”）？

【英文标题】：How to keep the content of a span together when resizing window (how to "word-break" at span boundaries)?

【发布时间】：2022-01-21 19:27:20

【问题描述】：

在我的情况下， &nbsp 不起作用。我有一个跨度，其中包含一个反应图标和右侧旁边的一个数字（想想一个星形图标和一个用户评分）。当我将视口的大小调整到某个断点时，右侧的数字会向下移动到新行，但图标保持在原位。我想这样做，如果没有足够的空间让图标和数字一起显示在该行上，那么它们都会向下移动到新的一行，这样图标和数字就不会被分开。

代码看起来像：

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

如何确保我的跨度在调整窗口大小时保持在一起，特别是在最后一个跨度的情况下，如何防止右侧的数字（分数）跳到没有图标的新行，然后当窗口进一步调整大小时图标跳下来？我在某处读到 应该可以工作，但它没有。

希望我的问题很清楚。如果不是，我很乐意澄清。我还应该提到导致内容换行的原因是容器缩小。也许这很相关。

【参考方案1】：

尝试将它们放在一个 div 下

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

然后设置

white-space:nowrap;

【讨论】：

我以为你不能在