Question

我需要创建一个样式丰富的文本，该文本不会在视觉上显示特定字符，但是确实包含用于其他目的的字符。例如，用户界面可能显示类似^_$123^₄₅的内容，但是底层文本实际上是$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选择'word'或单击三次以选择该块，未选择45。因此，保持.cs内联对于确保将整个文本视为一个连续的文本很重要。

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

Answer 1

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

.cs {
 font-size: 0;
}

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

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

1 个答案: