在项目中经常会出现要显示数据库中的大段文本内容，如说明或备注等信息，当其中存储有换行符的时候，前端通常会忽略这个换行，直接在一行显示，那么怎么解决呢？

解决方案一：使用HTML `<br>` 标签

HTML的<br>标签是一种简单而直观的方法，它可以将文本中的换行符正确地呈现在浏览器中。
示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>HTML换行示例</title>
</head>
<body>
  <p>这是第一行文本。<br>这是第二行文本。</p>
</body>
</html>

优点

简单方便：在数据库中存放数据的时候直接将需要换行的部分添加这个标签即可。

缺点

不灵活：如果需要换行的部分特别多，那么会很麻烦。可能会导致HTML变得冗长且难以维护。
安全性问题：潜在的XSS风险，应谨慎处理未经验证的文本。
而且也会改变数据库中原始数据，在导出数据的时候也会把标签导出来。

解决方案二：使用CSS `white-space` 属性

CSS的white-space属性允许更灵活地控制文本的显示方式，适应不同的设计需求。

相关属性如下：

normal（默认值）：这是最常见的设置，它会使文本中的多个连续空白字符（包括换行符）合并成一个单一的空格，并将文本自动换行以适应容器的宽度。
nowrap：文本中的空白字符会被合并成一个单一的空格，但文本不会自动换行，而是在容器边界处溢出。
pre：保留文本中的空白字符，但文本不会自动换行，而是在容器边界处溢出。此选项不会合并多个连续空白字符，而会保留它们的原始数量和位置。
pre-line：保留文本中的空白字符，并允许文本在需要时自动换行以适应容器宽度。这会合并多个连续空白字符。
pre-wrap：保留文本中的空白字符，并允许文本在需要时自动换行以适应容器宽度。不合并多个连续空白字符。
break-spaces：类似于 pre-wrap，但只在空白字符处允许换行，不会在单词内部断开。

按需选择对应的属性即可。

优点

样式控制：更好地控制文本的显示方式，适应不同的设计需求。
保留原始格式：保留原始文本中的换行符。

缺点

稍微复杂，需要处理CSS

结论

在前端中显示数据库中的带有换行的文本，可以使用HTML<br>标签或CSSwhite-space属性。选择哪种方法取决于具体需求和项目背景。如果只是在前端显示数据需要简单换行，那么第一种更简单方便，如果需要大量的换行，并且需要导出或动态修改的情况就使用第二种，更加灵活。无论选择哪种方法，都需要谨慎处理未经验证的文本，以防止潜在的安全问题。