如何将同一行内不同span标签的文本复制为单行内容？

问题分析 #

你的HTML存在标签闭合错误（<span/>和<div/>需改为</span>和</div>），同时每个.word元素内部的换行与缩进会被浏览器保留，导致复制时出现换行。以下是两种可行的解决方案：

方案一：CSS控制空白行为 #

通过CSS调整元素的空白处理规则，让浏览器渲染和复制时自动合并多余空白：

修正后的HTML #

<div class="text">
   <span class="word">
      Hello
   </span>
   <span class="word">
      world!
   </span>
</div>

对应的CSS #

.text {
  white-space-collapse: collapse; /* 合并所有连续空白（包括换行） */
  text-wrap: nowrap; /* 强制内容单行显示 */
}

.word {
  display: inline; /* 确保span为行内元素，不独占一行 */
}

若需兼容旧版浏览器，可替换为：

.text {
  white-space: nowrap;
}

.word {
  display: inline;
  white-space: normal;
}

方案二：JavaScript自定义复制内容 #

通过监听复制事件，手动提取文本并拼接为单行，完全控制剪贴板内容：

// 监听.text元素的复制事件
document.querySelector('.text').addEventListener('copy', function(e) {
  e.preventDefault(); // 阻止默认复制行为
  
  // 提取每个.word的文本，去除首尾空白后用空格拼接
  const targetText = Array.from(this.querySelectorAll('.word'))
    .map(item => item.textContent.trim())
    .join(' ');
  
  // 将处理后的文本写入剪贴板
  e.clipboardData.setData('text/plain', targetText);
});

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