如何使 header 包含 span 和 non-breaking 空格来包裹整个单词

Question

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

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

在 home-title 上没有额外的样式，标题会这样脱离视口：

鉴于 this 问题，我在标题上尝试了很多 CSS 属性，并且 none 使整个“McGill”换行到下一行。我得到的最好的是

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

这给了我这个：

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

Answer 1

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

Answer 2

我设置

span {
    display: inline-block;
}

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

如何使 header 包含 span 和 non-breaking 空格来包裹整个单词

How to make a header containing spans and non-breaking spaces wrap entire words

html

css

line-breaks

reactjs