React Web应用中如何为标题添加换行/隐形空格匹配Figma设计？

API 探路者

2026-8-10

React标题实现指定换行的几种方案

根据你的需求，要在"we make it simple"和"to create software"之间实现固定换行，以下是几种在React中可行的方法：

直接使用HTML <br />标签
这是最直接的方式，适合固定位置的强制换行：
```
<h1>we make it simple<br />to create software</h1>
```
完全匹配设计图里的换行位置，无需额外样式。
CSS配合换行符\n
给标题元素添加white-space: pre-line样式，让浏览器识别文本中的换行符：
1. 先定义CSS：
```
.caption {
  white-space: pre-line;
}
```
1. JSX中使用换行符：
```
<h1 className="caption">we make it simple\nto create software</h1>
```
或者用模板字符串保留换行格式：
```
<h1 className="caption">
  {`we make it simple
```

to create software`}

```

拆分为独立元素用CSS控制
如果需要对两行文本单独设置样式（比如不同字号、颜色），可以把文本拆成两个<span>，通过CSS让它们换行：
1. JSX代码：
```
<h1 className="caption">
  <span>we make it simple</span>
  <span>to create software</span>
</h1>
```
1. 对应的CSS：
```
.caption span {
  display: block;
}
```