如何在不破壞複製粘貼的情況下替換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

事實上，這將是相當不錯 –

雖然草案指定了複製粘貼行爲嗎？我看不到那裏。 –

回答