如何在HTML中创建一个不可见的字符，但仍然可以被选中？

Question

背景

我正在进行一个网络聊天项目的副业，其中遇到的问题之一是如何使复制和粘贴消息的用户体验更加友好。

目前，所有元素都按其自己的标签组织，并用 CSS 规则分隔开来。因此，如果您尝试复制聊天记录的某个部分，它将以 23:49userHello World 的形式出现。

我想到的解决方案是使用零宽度制表符将它们分隔开，这仍然会被文本选择器选中，而当作为纯文本粘贴时，它只是一个普通的制表符。这不仅会在复制粘贴操作中将其分隔开，而且使用 awk 解析也非常容易。

简述

如何使用 CSS 或任何字符修改可打印制表符（	），使其在布局中不可见，但仍然能够在文本选择中被选中？

- Luiz Berti

---

仅使用CSS？另外，我猜你会寻找一个跨浏览器的解决方案，对吧？ - Alvaro Montoro

最好是这样，跨浏览器也是非常希望的，尽管我不会费心去考虑IE。但是请随意提出其他建议。 - Luiz Berti

有趣的是，至少有一种仅使用CSS的解决方案可以在IE上运行，但在其他浏览器上却不行 :P - Alvaro Montoro

Answer 1

由于所有元素都是在自己的标签中组织的，因此您可以在内容中使用带有所需字符的 :after（带有 font-size:0）作为分隔符。据我所知，这个解决方案只适用于IE，因为其他浏览器不会选择伪元素。

span:after {
    content: " ";
    font-size:0;
}

你可以在这个jsfiddle上看到它：http://jsfiddle.net/bc7jrdff/1/（记住只在IE上！）

另一种CSS可能性是在生成页面时直接添加特殊字符，并应用::first-letter伪元素。这种解决方案的问题是并非所有字符都会被视为第一个字母（空格不算）

使用JavaScript，您可以想出适用于所有浏览器的解决方案：将您的字符附加到元素上（再次使用font-size:0）：

// CSS
span.hiddenChar {
    font-size:0;
}

// JS
$(document).ready(function() {
    $("span").prepend("<span class='hiddenChar'> </span>");
});

您可以在此处查看其运行情况：http://jsfiddle.net/bc7jrdff/2/

或者，如果您更喜欢不使用jQuery的JavaScript：

// HTML
<span class="data">23:49</span><span class="data">user</span><span class="data">Hello World!</span>

// JS
var aux = document.querySelectorAll(".data");
for (x = 0; x < aux.length; x++) {
    aux[x].innerHTML = "<span class='hiddenChar'> </span>" + aux[x].innerHTML;
};

您可以在这个 jsFiddle 上看到：http://jsfiddle.net/bc7jrdff/4/

- Alvaro Montoro

---

我会再坚持一段时间，试着想出解决方案。我甚至没有计划支持IE，而复制粘贴没有分隔符的原因是因为我一开始使用了:after和:before。 此外，仅为此加载jQuery的想法让我感到恐惧。 - Luiz Berti

在这一行上，也许你可以使用 ::first-letter（再次使用 font-size:0 并在生成页面时放置所需字符，无需 JavaScript）。 - Alvaro Montoro

我会将其添加到答案中，但除非它解决了问题，否则不要将其标记为解决方案。 - Alvaro Montoro

我还添加了一个纯JavaScript的解决方案，而不使用jQuery。 - Alvaro Montoro

请记住，为了兼容IE，您可以使用document.querySelectorAll('.aux')（适用于IE8及以上版本），而不是getElementsByClassName()。 - David Thomas