如何使包含跨度和不间断空格的标题包含整个单词答案

【问题标题】：How to make a header containing spans and non-breaking spaces wrap entire words如何使包含跨度和不间断空格的标题包含整个单词
【发布时间】：2021-04-07 23:29:40
【问题描述】：

我正在做一个 React 项目，它的标题是这样的。我希望整个单词换行到下一行：

 <h1 id="home-title">
        <span style={{ color: "#0A8399" }}>Effective Altruists</span>
    &nbsp;at&nbsp;
        <span style={{ color: "#E83C31" }}>McGill</span>
 </h1>

home-title 上没有额外的样式，因此标题会像这样转义视口：

我在标题上尝试了许多 CSS 属性，给出了this 问题，但没有一个使整个“McGill”换行到下一行。我所拥有的最好的是

#home-title {
    overflow-wrap: break-word;
}

这给了我这个：

我错过了什么吗？提前致谢。

【问题讨论】：

你为什么不将&nbsp;at&nbsp; 包裹在它自己的跨度中？
最终效果应该是什么也不清楚
@Paulie_D 我希望效果是没有溢出并且换行符将整个单词带到下一行。将 &nbsp;at&nbsp; 包装在它自己的 span 中并没有改变任何东西。
你的意思是这样？ - codepen.io/Paulie-D/pen/zYKRJPG

标签： html css reactjs line-breaks

【解决方案1】：

我设置

span {
    display: inline-block;
}

并且spans 在换行时停止断词。

【讨论】：

【解决方案2】：

      <h1 id="home-title">
        <span style={{ color: "#0A8399" }}>Effective Altruists</span>
        &nbsp;at&nbsp;
        <br/>
        <span style={{ color: "#E83C31" }}>McGill</span>
      </h1>

【讨论】：

我希望系统动态工作。在更宽的屏幕上，不需要换行
你应该清楚地提到它，否则不会有混淆