React标题行数设置：如何将标题调整为两行显示？

嘿，我来帮你搞定这个标题换行的需求，这里有几种简单可行的方法，你可以根据自己的需求选择：

• 方法一：使用HTML的<br>标签（最直接）
  JSX支持直接内嵌HTML的换行标签，只需要在想要换行的位置插入<br />即可：

  <h1 className="presentation-title">Broadcaster<br />control panel</h1>
  

  这种方法快速简单，不需要额外的样式或标签，适合只需要简单换行的场景。

• 方法二：用<span>包裹每行并设置块级显示（适合需要单独样式）
  如果之后需要给两行标题分别设置样式，可以用<span>把每行内容包裹起来，再通过CSS让每个span独占一行：

  <h1 className="presentation-title">
    <span>Broadcaster</span>
    <span>control panel</span>
  </h1>
  

  对应的CSS样式（可以放在你的样式文件里）：

  .presentation-title span {
    display: block;
    /* 还可以添加margin、font-size等样式来调整两行的间距或大小 */
  }
  

• 方法三：利用CSS的white-space属性（无额外标签）
  如果你不想添加任何额外标签，可以通过设置white-space: pre-line来让JSX里的换行生效：

  <h1 className="presentation-title" style={{ whiteSpace: 'pre-line' }}>
    Broadcaster
    control panel
  </h1>
  

  这种方法会保留代码里的换行，同时自动忽略多余的空格，比较简洁。

下面是用方法一修改后的完整组件代码：

function IndexHeader() {
  return (
    <>
      <div className="page-header section-dark" style={{ backgroundImage: "url(" + require("assets/img/background.jpg") + ")" }}>
        <div className="filter" />
        <div className="content-center">
          <Container>
            <div className="title-brand">
              <h1 className="presentation-title">Broadcaster<br />control panel</h1>
            </div>
            <h2 className="presentation-subtitle text-center">
              Pannello di controllo degli spot AdEx
            </h2>
          </Container>
        </div>
      </div>
    </>
  );
}
export default IndexHeader;

内容的提问来源于stack exchange，提问作者campanto