Question

我有这么长的文字串：

AAAABBBBCCCCDDDDEEEEFFFFGGGGHHHH

但出于可读性目的，我想将其显示为：

AAAA BBBB CCCC DDDD EEEE FFFF GGGG HHHH

当突出显示并复制时，此字符串必须保持不间断，因此我不能简单地使用空格。

如何使用CSS在视觉上将此字符串拆分为块，但保留原始文本格式？

编辑：我想尽可能避免使用JS

Answer 1

请注意，复制该东西时不会复制空格！为什么？因为没有内容（html）空格只有样式（css）spaces.this是诀窍：

<style>
.add_spaces > span::after {
    content:" ";
}
</style>
<div class="add_spaces">
    <span>AAAA</span><span>BBBB</span><span>CCCC</span><span>DDDD</span><span>EEEE</span><span>FFFF</span><span>GGGG</span><span>HHHH</span>
</div>

Answer 2

您需要一些将子字符串指定为元素的标记，否则它们无法在CSS中进行样式设置。标记可以使用JavaScript生成，但为此您需要精确的规则（算法）来分割字符串。

假设可以将标记添加到HTML文件本身，您只需为除最后一个之外的每个子字符串设置正确的填充。（您也可以在所有子字符串上设置填充，但在标记中保留最后一个未标记的填充。）

＆＃13;

<style>
.spaced span {
   padding-right: 0.15em;
}
.spaced span:last-child {
   padding: 0;
}
</style>
<div class="spaced">
<span>AAAA</span><span>BBBB</span><span>CCCC</span><span>DDDD</span><span>EEEE</span><span>FFFF</span><span>GGGG</span><span>HHHH</span>
</div>

＆＃13;

在这种方法中，您可以自由调整间距，例如使它小于空间的宽度（平均约为0.25em）。

使用CSS将长字符串视觉分成块（但在复制时保留原始格式）

2 个答案: