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

时间:2016-03-05 20:08:36

标签: html 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))

这是正确的方法吗?

3 个答案:

答案 0 :(得分:3)

适用于Chrome和Firefox:

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

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

JSFiddle

答案 1 :(得分:3)

这是一个选项:

&#13;
&#13;
    <% String s=request.getParameter("status");
         If (s==null)
          {  }
         else if (s.equals ("1"))
         {
    %>
   <br/><h3>  user id already exist </h3>
    <%} 
         else if (s.equals ("2"))
         {
    %>
   <br/><h3> registration successfull</h3>
    <%}
         else { }%>
&#13;
.lambda {
  font-size: 0;
}
.lambda:after {
  content: "λ";
  font-size: 16px;
  /* reset font */
}
&#13;
&#13;
&#13;

答案 2 :(得分:1)

CSS content 3草案建议content也适用于元素。然后,如果浏览器决定实现此行为,您将能够使用

&#13;
&#13;
.lambda {
  content: "λ";
}
&#13;
(<span>
  <span class="lambda">lambda</span>
</span>x (+ x 1))
&#13;
&#13;
&#13;