如何在不破坏复制粘贴的情况下替换CSS中的字符串？

(lambda (x) (+ x 1))

我想如下，无需改变什么实际获取复制粘贴来显示它：

(λ (x) (+ x 1))

目的是实现一个效果Emacs'prettify-symbols-mode。 This question显示了如何隐藏一些文本并显示其他内容，但display:none元素不会被复制，至少在Firefox中是如此。

换句话说，如何在不破坏复制粘贴的情况下显示已批准的源代码列表？纯HTML + CSS的奖励积分。

，我能拿出最好的是以下几点：

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

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

那是正确的做法？

2016-03-05 Clément

这工作在Firefox，但无法在Chrome https://jsfiddle.net/Lg0wyt9u/138/ –

这个工程在Chrome和Firefox：

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

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

2016-03-05 20:36:31 Leventix

非常太好了！试验你的例子表明'position：absolute'也可以工作（而不是'display' +'width'）。你有什么可能更好的意见吗？ –

使用'position：absolute;'如果您在Firefox中选择它，则会覆盖部分可见文本。使用'width：0'时感觉好一点，因为你想把文本挤压到零宽度。这是一种黑客的方式，所以无论工程:) – Leventix

这里有一个选项：

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

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

2016-03-05 20:38:17

谢谢！它是一个记录的属性，将大小设置为0将“隐藏”一个元素？或者一些浏览器会有最小尺寸？ –

它不会隐藏元素，只是其中的文本。我不知道任何具有最小尺寸的特定问题，除非*可能*一些非常旧的Android版本。 –

提出CSS content 3草案content也应该适用于元素。然后，如果浏览器决定实现这种行为，你将能够使用

.lambda { 
 
    content: "λ"; 
 
}

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

2016-03-05 21:43:11 Oriol

当然，这现在不起作用。 – Oriol

事实上，这将是相当不错 –

虽然草案指定了复制粘贴行为吗？我看不到那里。 –

回答