我们都知道在写 html 要实现换行的效果，会想到用 <br/> 或者 \n。
例如在如下的一个界面；

其实对于前面三条信息的展示实现方式有很多种，不过我今天要分享的就是用换行符的形式哦～

一. 使用 dangerouslySetInnerHTML={{ __html: ''}}

---

  <div
    dangerouslySetInnerHTML={{
      __html: '1.这是第一行<br/>2.然后这里是第二行\n3. 最后这是第三行的信息展示哦～～～',
    }}
  />

我们观察到这样子的界面如下，这里的 <br/>能够换行，但是 \n似乎不起效果：

其实很简单，只要在文字的容器里面加入一个样式，就可以使\n也起作用啦～

  div {
     white-space: pre-line;
  }

二. 通过字符串传入 <div>

---

html 与 css 的代码如下：

  <div>
    {'1.这是第一行<br/>2.然后这里是第二行\n3. 最后这是第三行的信息展示哦～～～'}
  </div>

  div {
     white-space: pre-line;
  }

但是我们会发现这里的 <br/>被解析成一个字符串了，没办法实现 html 的标签效果，所以如果要用这种形式实现换行，还是用 \n的方法吧～

三. 其他

---

• html 中 还有 pre 标签，
• js 的 innerHTML, innerText，
  甚至还有更多更多的方法。实现的方式千千万万，但还是要找出一个更合适的。就我个人而言，我还是更喜欢第二种～