html - 如何在 HTML 中制作一个不可见的字符，它仍然会在文本选择时被选中？

Question

背景故事

所以我将网络聊天作为一个副元素，我遇到的问题之一是让复制和粘贴消息的用户体验变得友好。

现在，所有元素都组织在自己的标签内，用 CSS 规则隔开和分隔，如果您尝试复制聊天记录的一部分，它会以 23:49userHello World 的形式出现。

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

长话短说

我如何使用 CSS 修改可打印制表符 ( ) 或任何相关字符，使其在布局中不可见，但仍会在文本选择？

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/