如何在 HTML 中创建一个在文本选择时仍会被选中的不可见字符？

Question

背景故事

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

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

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

进行解析

TL;DR

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

Answer 1

由于所有元素都组织在它们自己的标签中，因此您可以使用 :after 和您希望在内容中作为分隔符的字符（使用 font-size:0）。据我所知，此解决方案仅适用于 IE，因为其他浏览器不支持 select 伪元素):

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

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

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

使用 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/

或者，如果您更喜欢 JavaScript 而没有 jQuery：

// 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/

如何在 HTML 中创建一个在文本选择时仍会被选中的不可见字符？

How to make an invisible character in HTML, that still get's picked up on text selection?

html

css

character

spreadsheet

背景故事

TL;DR