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

标签 html css

我有一长串这样的文字:

AAAABBBBCCCCDDDDEEEEFFFFGGGGHHHH

但出于可读性目的,我想这样显示它:

AAAA BBBB CCCC DDDD EEEE FFFF GGGG HHHH

当突出显示和复制时,这个字符串必须保持完整,所以我不能简单地使用空格。

如何使用 CSS 在视觉上将此字符串分解成 block ,同时保留原始文本格式?

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

最佳答案

请注意,当您复制内容时,不会复制任何空格!为什么 ?因为没有内容(html)空间只有样式(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 - 使用 Javascript 创建字体

html - 在 Silverlight 上显示 HTML Div

html - 如何为位于元素宽度范围内的框阴影添加边框半径?

css - Flexbox 元素的高度在 IE 上折叠

javascript - 将...替换为阅读更多(自定义省略号)

html - 如何锚定到 HTML 详细信息中的目标元素

php - 单击提交按钮后显示文本。 PHP

javascript - 创建一个在悬停时显示详细信息的 map

html - CSS 样式的应用顺序是什么?

PHP 表单到电子邮件 - 电子邮件仅包含来自已填写字段的数据