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('&nbsp;&nbsp;&nbsp;&nbsp;');
   this.innerHTML = indentation + this.innerHTML
});

<强>输出

    1 tab indentations

        2 tab indentations

            3 tab indentations

                4 tab indentations

步骤：

选择包含tab-
循环过来
在-上拆分班级名称并获取索引1（-后面的数字）
创建一个包含上述索引数的数组，并用它连接4个非中断空格（创建选项卡）
将该元素的HTML设置为其当前HTML内容加上乘以的;nbsp s

<强>参考

我在this answer时从Peter Bailey那里得到了第4步 - 很酷的伎俩。

插入可复制的可选空格

1 个答案: