css - HTML CSS : How to copy and paste div block elements into Notepad while retaining the white space?

Question

我正在尝试制作一个和弦网站，您可以在其中获取歌词并将和弦放在上面。

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

这是我所说的示例:http://jsfiddle.net/CPYTg/3/

设置:

 <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;}

如您所见，和弦和歌词在浏览器中显示正确，但在将它们复制并粘贴到记事本时，它会将它们格式化为单独的元素。有什么方法可以解决这个问题，以便在您复制和粘贴它们时保留空格？

Answer 1

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

<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>

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