如何使可选择的文本与显示的不同

Question

我需要创建一段风格很重的文本，它不会在视觉上显示特定字符，但确实包含用于其他目的的字符。例如，UI 可能会显示类似 $123 的内容45，但底层文字实际上是3.45.

如果您 select 显示的文本和 Ctrl+C，剪贴板实际上应该包含底层文本。
如果您 select 显示的文本并单击鼠标右键，上下文菜单应该有一个选项，类似于 搜索 Google for "X " 其中 X 是基础文本（假设浏览器支持它）。
屏幕阅读器和网络爬虫都应该 'see' 底层文本。

这是我目前的解决方案：

body {
  font-family: sans-serif;
}

.price {
  line-height: 4.4rem;
  font-size: 4rem;
}

.cc, .cf {
  font-size: 0.6em;
  vertical-align: super;
  margin: 0 2px;
}

.cs {
  opacity: 0;
  margin: 0 0 0 -.28em;
}

.ci {
  font-size: 4.4rem;
}

<span class="price" aria-label="3.45">
  <span class="cc">$</span><span class="ci">123</span><span class="cs">.</span><span class="cf">45</span>
</span>

但是，我不确定拥有一个不可见的 (opacity: 0) 元素是否真的是实现此目的的最佳方式 — 感觉有点卑鄙，一些聪明的爬虫可能也这么认为。此外，-.28em 不可缩放——这只是我能找到的最好的数字，我必须针对不同的字体或字体大小调整它。

我可以将 .cs 更改为 display: inline-block; width: 0 来解决 margin 问题，但是如果您双击 123 到 select 'word' 或三次单击 select 方块，45 未被 select 编辑。因此，保持 .cs 内联对于确保整个文本被视为一个连续的文本片段似乎很重要。

所以我的问题是，使用 HTML5 和 CSS，让 selected 内容与显示内容不同的语义正确方法是什么？

Answer 1

字体大小 0 是您可以在此期间尝试的替代方案。

.cs {
 font-size: 0;
}

信息将根据您的要求保留在屏幕 reader 和剪贴板

上

如何使可选择的文本与显示的不同

How to make selectable text different from what's displayed

html

css

semantic-markup

web-crawler

screen-readers