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

【问题标题】：How to make selectable text different from what's displayed如何使可选文本与显示的文本不同
【发布时间】：2019-05-20 17:15:14
【问题描述】：

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

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

这是我目前的解决方案：

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="$123.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 以选择“单词”或三次单击以选择块， 45 未被选中。因此，保持 .cs 内联对于确保将整个文本视为一个连续的文本片段似乎很重要。

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

【问题讨论】：

您可以单独使用 font-size: 0 来表示句号，对吗？那不行吗？
@karthick 实际上，确实如此。我不知道为什么我没有想到这一点。随意发布作为答案。
由于实际页面内容是$123.45，这就是屏幕阅读器和网络爬虫将看到的；无需担心。选择和上下文菜单可能是一个不同的问题，但对于爬虫和阅读器来说，内容（不是渲染）才是王道。

标签： html css web-crawler semantic-markup screen-readers

【解决方案1】：

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

.cs {
 font-size: 0;
}

信息将根据您的要求保留在屏幕阅读器和剪贴板上

【讨论】：