React/TS三击选中文本粘贴时出现多余换行问题求助

问题场景与代码 #

我用React/TypeScript编写了展示用户输入的方法displayMsg：

function displayMsg({ msg}: UsrMsg) {
    return (
       <div>
          {msg.split('\n').map((line) => (
             <Fragment>{line}</Fragment>
          ))}
       </div>
    );
}

遇到的问题：

• 单行输入blabla msg，三击选中复制后粘贴会多一行空行
• 多行输入bla1\nbla2\nbla3，三击选中复制后末尾也会多一行空行
• 仅三击选中时出现该问题，双击选中正常
• 尝试调整CSS的whiteSpace属性，未解决问题
• Firefox、Chrome、Edge（Windows系统）均存在此问题

怀疑原因：三击选中时会连带选中DOM中元素间的空白文本节点，粘贴时被解析为换行。

解决方案 #

方案1：移除JSX换行，避免生成空白文本节点 #

修改map的JSX写法，去掉元素间的换行，防止React生成多余的空白文本节点，同时给每个片段添加唯一key：

import { Fragment } from 'react';

function displayMsg({ msg}: UsrMsg) {
    return (
       <div>
          {msg.split('\n').map((line, index) => (
             <Fragment key={index}>{line}</Fragment>
          ))}
       </div>
    );
}

方案2：用CSS自动处理换行，无需手动拆分 #

直接给容器设置white-space属性，让浏览器自动处理换行，省去手动拆分的步骤：

function displayMsg({ msg}: UsrMsg) {
    return (
       <div style={{ whiteSpace: 'pre-line' }}>
          {msg}
       </div>
    );
}

• pre-line：保留换行，同时合并多个空格/制表符，适合普通文本展示
• pre-wrap：保留所有空格、换行，适合需要精确格式的文本

方案3：用<span>包裹每行并设置块级显示 #

如果需要对每行单独设置样式，可用<span>代替Fragment并设置display: block，同时避免元素间的空白：

function displayMsg({ msg}: UsrMsg) {
    return (
       <div>
          {msg.split('\n').map((line, index) => (
             <span key={index} style={{ display: 'block' }}>{line}</span>
          ))}
       </div>
    );
}

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