如何在React+Laravel中从数据库获取并显示带换行空格的文本

问题原因 #

HTML 默认会忽略文本中的换行符（\n）和连续空格，直接在 <p> 标签中渲染时，原输入格式会丢失。

解决方案 #

方案1：使用CSS white-space 属性（推荐） #

通过设置 white-space: pre-wrap，可以保留文本的换行和空格，同时让内容超出容器时自动换行，无需修改文本内容。

内联样式写法：

修改展示文本的 <p> 标签：

<p style={{ whiteSpace: 'pre-wrap' }}>{v.pdesc}</p>

类名样式写法：

先在CSS中定义类：

.blog-content {
  white-space: pre-wrap;
  /* 可选：调整行高提升可读性 */
  line-height: 1.6;
}

然后给 <p> 标签添加类名：

<p className="blog-content">{v.pdesc}</p>

方案2：转换换行符为 <br> 标签 #

如果需要更精细的格式控制，可以将文本中的换行符替换为HTML的 <br> 标签，连续空格替换为  ，再通过 dangerouslySetInnerHTML 渲染。

注意：此方法存在XSS风险，仅当你能确保输入内容完全安全时使用。

实现代码：

// 定义格式化函数
const formatText = (text) => {
  // 替换换行符为<br>，连续空格为对应数量的&nbsp;
  return text.replace(/\n/g, '<br>').replace(/\s{2,}/g, (match) => '&nbsp;'.repeat(match.length));
};

// 渲染时使用
<p dangerouslySetInnerHTML={{ __html: formatText(v.pdesc) }}></p>

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