HTML CSS：如何在保留空白的同时将div块元素复制粘贴到记事本中？

我正在尝试制作一个和弦网站，在那里你可以把歌词和和弦放在上面

虽然我能够成功地将和弦定位在歌词上方，方法是分别跨越它们，将它们显示在一个块中，然后将它们包装在另一个显示内联块的跨距中，但当我尝试将它们复制并粘贴到记事本中时，它不会保留空格，而是将它们作为单独的元素粘贴

下面是我所说的一个例子：

设置：

 <li class="pair" onclick="javascript:doNote(0);"> 
            <span class="chord" id="ch_0">E</span><span class="lyric" id="ly_0">Tonight</span>
        </li>
li.pair {display:inline-block;padding:0 5px;}
.lyric {display:block;}
.chord {display:block;text-align:center;}

伊顿夜

li.pair{显示：内联块；填充：0 5px；}
.lyric{display:block；}
.chord{显示：块；文本对齐：中心；}

---

正如您所见，和弦和歌词在浏览器中正确显示，但当涉及到将它们复制和粘贴到记事本时，它会将它们格式化为单独的项目。有没有办法解决这个问题，以便在复制和粘贴它们时保留空白？

是的，您应该能够使用“pre”标记，这意味着预格式化。因此，标签中的内容并不是被浏览器真正“解析”为HTML，浏览器只是在HTML文件中找到字符时在屏幕上吐出字符。试试这个（HTML中没有缩进）：

E G#m C#m
今晚我会玩得很开心
F#m B E
我觉得自己活着，整个世界。。。

---

显然，从标记中删除X，这样stackoverflow就不会解析它了。这将在浏览器中显示它的外观，并将复制/粘贴到记事本上。

问题是，我正在尝试解析歌词，并使其易于在上面插入和弦，这意味着只需将元素的HTML更改为用户输入的任何内容。必须在HTML中使用pre来格式化所有内容，这是一种完全不同的方法，我正在尝试这样做。但是，如果这是让字符以应有的方式显示在记事本中的唯一方法，我想必须使用pre是我唯一的选择。好的，你可以让每一行文本都有自己的带有onclick事件的“pre”。单击时，使用javascript获取单击的位置（例如，单击“今晚”可能需要4个字符）。并在正确的位置插入和弦（在今晚的“i”上方）。看看这把小提琴：这是一个很好的解决方案，但是你只限于预格式化。在我的示例中，我还可以更改歌词和和弦的字体，因为它们被认为是成对的div，一起显示，因此总是独立于字体正确格式化。虽然我可以用你的方法复制到纯文本。是的，你的另一个选择是有一个“导出”函数，它遍历数据并插入正确数量的空格。如果用户没有单间距字体，你总是会遇到问题。这就是我的想法。可能使用javascript元素.oncopy（）函数将和弦解析为纯文本。这是我对这样做的逻辑的想法：var spacing=0；对于行中的每个单词{如果（word.chord）存在{将chord放置在位置（间距）}间距+=currentword.length；}

<preX>
   E                   G#m            C#m
Tonight I'm gonna have myself a real good time
        F#m   B         E    
I feel alive and the world...
</preX>