从MySQL数据库获取内容换行丢失问题（MySQL、Sequelize、Node、Handlebars）

以下是几种可行的解决方法：

方法一：用CSS样式直接保留换行 #

无需修改JS或Handlebars代码，给渲染内容的容器添加CSS属性即可：

.content {
  white-space: pre-line;
}

pre-line会识别文本中的换行符并在浏览器中显示换行，同时自动合并连续的空白字符，适配普通文本的展示需求。

方法二：在Handlebars视图中替换换行符 #

利用Handlebars的字符串替换功能，将换行符\n替换为HTML换行标签<br>，同时用三个大括号{{{ }}}关闭HTML转义（避免<br>被转义成纯文本）：

<div class="card">
  <div class="card-content">
    <p class="title">
      {{story.title}}
    </p>
    <p class="content">
       {{{story.content.replace(/\n/g, '<br>')}}}
    </p>
  </div>
</div>

方法三：在后端Sequelize查询后处理数据 #

在将数据传给前端前，提前把内容里的换行符替换成<br>，前端渲染时用{{{ }}}输出处理后的内容：

router.get('/story/:id', async (req, res) => {
  try {
    const getStory = await Story.findByPk(req.params.id, {
      include: [
        {
          model: User,
          attributes: ['username'],
        },
      ],
    });

    const story = getStory.get({ plain: true });
    // 替换换行符为HTML换行标签
    story.content = story.content.replace(/\n/g, '<br>');
    
    res.render('story', {
      story,
      logged_in: req.session.logged_in,
    });
  } catch (err) {
    res.status(500).json(err);
  }
});

对应前端渲染代码：

<div class="card">
  <div class="card-content">
    <p class="title">
      {{story.title}}
    </p>
    <p class="content">
       {{{story.content}}}
    </p>
  </div>
</div>

方案对比 #

• CSS方案：最简洁，不修改业务数据，仅通过样式实现换行，推荐优先使用。
• 视图层处理：仅在当前页面生效，不影响后端数据逻辑，适合单一页面需求。
• 后端处理：可统一处理所有页面的换行逻辑，但会修改传递到前端的内容结构，需根据业务场景选择。

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