3

设置：

我想输出一些显示可见空格、换行符等
的文本（为了显示字符串以进行调试（或者说是富文本编辑器））
，即 id 喜欢进行以下类型的替换 

" " -> "<span class="whitespace">&middot;</span>"  
"\r" -> "<span class="whitespace">\\r</span>"  
"\n" -> "<span class="whitespace">\\n</span>"

也许可以定义以下 CSS 规则 

/*display whitespace chars as a light grey*/
.whitespace { color:#CCC; }

以便

这两行
    字符串

将显示为

this·二·内衬\n
\t 字符串

问题：

是否可以选择上述“ Visual-White-pace”文本 /复制到纸板时，它是否可以在没有空间标记的情况下复制？

是否有一些 CSS 属性可以显示 x，但复制 y？
javascript黑客？
特殊的空白字体？
其他？

4

2 回答 2

4 
<style>.paragraph-marker:after { content: "\B6" }</style>

<p>Foo<span class="paragraph-marker"></span></p>

<p>Bar<span class="paragraph-marker"></span></p>

这:after是一个“伪选择器”，它匹配紧跟受影响元素的伪节点。

该content属性可以与这些伪节点一起使用以指定它们的文本内容。当在引用部分之前和之后指定引号时，它会派上用场，或者在语义 HTML<ol>中列出您不想以项目符号格式显示的逗号等分隔符。

它应该对您的用例派上用场，因为浏览器在将剪贴板中存储的 DOM 选择转换为粘贴时的纯文本时不处理伪节点。

于 2013-04-28T20:01:47.613 回答
2

http://codepen.io/msvbg/pen/ebgrj

在最新版本的 Chrome 中运行良好。翻转showWhitespace变量以尝试两种方式。它通过在文本层下面粘贴一个可见的空白层来工作，默认情况下只复制最顶层的层。

于 2013-04-28T20:09:34.977 回答