插入可复制的空白区域

Question

我正在渲染html到一个有大量缩进程度的代码块，我希望人们可以将其复制到文本编辑器中，同时保留缩进。

目前我在代码中有很多 个字符，这非常混乱，并且很难维护。我宁愿通过css来使用:: before操作符，但我尝试过的所有解决方案都存在问题。

如果我在使用before之前的元素前插入\ 00a0个字符，则浏览器显示空白，但不会复制到文本编辑器中。

如果我使用'pre'，源代码中的空格被保留，它使得渲染的html太依赖于源代码的结构 - 也就是说，如果源代码中有div，它会在渲染中增加额外的行代码，再加上我不得不担心源代码中的空格和换行等问题，当我在编辑器中对代码进行重新格式化时，这是一个问题，为了保持它的清洁（这是相当动态的），我必须经常这样做。

所以基本上我需要一些css类，它们会给我不同级别的缩进，而不必在源文件中添加 或实际的空白，这些空白也会从浏览器复制到文本文件中。

Answer 1

下面的代码增加了该类指示的许多选项卡，class-4生成4个选项卡，然后将该选项卡的数量预先包含到包含该类的元素中 - jsFiddle Demo它逐行工作。

HTML

<p class="tab-1">1 tab indentations</p> 
<p class="tab-2">2 tab indentations</p> 
<p class="tab-3">3 tab indentations</p> 
<p class="tab-4">4 tab indentations</p> 

JS

var indentElements = $('[class*="tab-"]'); 

$.each(indentElements, function(index) { 
    var indentAmount = parseInt(this.className.split('-')[1]); 
    var indentation = new Array(indentAmount + 1).join('    '); 
    this.innerHTML = indentation + this.innerHTML 
}); 

输出

1 tab indentations 

     2 tab indentations 

      3 tab indentations 

       4 tab indentations 

步骤：

1. 选择上-用含有tab-
2. 遍历它们
3. 拆分的类名称的类的所有元素，并得到索引1
4. 与上述创建一个阵列（后面-数）索引数量并加入4个非空格（创建制表符）
5. 将该元素的HTML设置为其当前HTML内容加上乘以的;nbsp s

参考

• 我得到了第4步从彼得·贝利在this answer - 酷技巧。