html - 使用CSS在视觉上将长字符串分成多个 block (但在复制时保留原始格式)

原文 标签 html css

我有一长串这样的文字:

AAAABBBBCCCCDDDDEEEEFFFFGGGGHHHH


但出于可读性考虑,我想这样显示:

AAAA BBBB CCCC DDDD EEEE FFFF GGGG HHHH


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

如何使用CSS在视觉上将此字符串分成多个块,但保留原始文本格式?

编辑:如果可能的话,我想避免使用JS

最佳答案

请注意,当您复制事物时,不会复制空格!为什么呢因为没有content(html)空格,只有style(css)空格。这就是窍门:

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

关于html - 使用CSS在视觉上将长字符串分成多个 block (但在复制时保留原始格式),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28376684/

相关文章:

javascript - 防止滚动-jQuery

html - Flexbox中的内容具有最小大小

c# - 如何对CSV导出进行HTML编码

html - 将自定义表单错误置于不同的响应模式下

javascript - 如何为跨度实现 jQuery val()?

php - 如何修复特定的PHP白屏错误

javascript - 通过标签将Active class设置为特定的li

css - 并排div在主容器div中时未对齐

php - 解析 php 中的 solr 响应并将它们显示在 html 表中

javascript - 在文本对象HTML中定义允许的字符