React场景下，如何用pre-wrap保留元素最后一个换行符？

问题原因 #

white-space: pre-wrap的CSS规范中，末尾的换行符不会触发空行渲染——只有当换行符后还有其他内容时，才会生成对应的换行效果。这就是textarea能正常保留所有换行（包括末尾），但div会忽略最后一个\n的核心原因。

可行解决方案 #

方案1：内容层面补全（推荐）

在React渲染div内容时，判断文本末尾是否存在换行符，如果有，就追加一个非换行空格（\u00A0）。这个空格不会被用户看到，但能让pre-wrap识别出末尾的换行并渲染空行：

// 假设文本存储在text变量中
<div style={{ whiteSpace: 'pre-wrap' }}>
  {edited ? (
    <textarea style={{ whiteSpace: 'pre-wrap' }} value={text} onChange={/* 你的编辑逻辑 */} />
  ) : (
    text.endsWith('\n') ? `${text}\u00A0` : text
  )}
</div>

方案2：CSS伪元素兜底（无需修改内容）

如果不想改动文本内容，可以用CSS伪元素给div强制添加末尾换行，但要注意：这个方法会始终在div末尾多一行，不管原文本本身有没有末尾换行：

.text-display-container {
  white-space: pre-wrap;
}

.text-display-container:after {
  content: "\A";
  white-space: pre;
}

如果需要精准匹配原文本的换行逻辑，优先选择方案1的内容判断方式。

内容的提问来源于stack exchange，提问作者David Hérault