如何在CSS中替换字符串而不破坏复制粘贴?

Suppose I have the following code:

假设我有以下代码:

(lambda (x) (+ x 1))

I'd like to display it as follows, without changing what actually gets copy-pasted:

我想展示如下，不改变复制粘贴的内容:

(λ (x) (+ x 1))

The aim is to achieve an effect to Emacs' prettify-symbols-mode. This question shows how to hide some text and display something else instead, but display:none elements are not copied, at least in Firefox.

其目的是为了达到Emacs“漂亮符号模式”的效果。这个问题展示了如何隐藏一些文本并显示一些其他的东西，但是显示:没有元素不会被复制，至少在Firefox中是这样。

In other words, how can I display prettified source code listings, without breaking copy-paste? Bonus points for pure HTML+CSS.

换句话说，如何在不破坏复制粘贴的情况下显示美化的源代码清单?纯HTML+CSS的额外积分。

The best that I could come up with is the following:

我能想到的最好的办法是:

/* CSS */
.lambda:after {
    content:"λ";
}

<!-- HTML -->
(<span>
   <span style="position:absolute;left:-3000px;">lambda</span>
   <span class="lambda"></span>
 </span> x (+ x 1))

Is that the right approach?

这是正确的做法吗?

3 个解决方案

#1

This works in Chrome and Firefox:

这适用于Chrome和Firefox:

.hide {
  color: transparent;
  display: inline-block;
  width: 0;
}

.lambda:after {
  content:"λ";
}

JSFiddle

#2

Here's one option:

这里有一个选择:

.lambda {
  font-size: 0;
}
.lambda:after {
  content: "λ";
  font-size: 16px;
  /* reset font */
}

(<span>
   <span class="lambda">lambda</span>
</span>x (+ x 1))

#3

The CSS content 3 draft proposes that content should apply to elements too. Then, if browsers decide to implement this behavior, you will be able to use

CSS内容3草案建议内容也应该应用到元素中。然后，如果浏览器决定实现这种行为，您将能够使用它

.lambda {
  content: "λ";
}

(<span>
  <span class="lambda">lambda</span>
</span>x (+ x 1))

#1