屏幕阅读器读取自定义金额范围文本时，尾随零被读出的问题求助

大家好，我最近在做屏幕阅读器适配的需求：想让金额范围里的“-”被屏幕阅读器识别并读成“to”。

我目前的实现方式是用一个仅屏幕阅读器可见的类.sr-only，把原本带“-”的金额文本用aria-hidden='true'隐藏，同时在另一个带有.sr-only类的span里，手动写出希望屏幕阅读器读取的内容。

以下是我用的.sr-only样式：

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

对应的HTML结构是这样的：

Here is an amounts range <span aria-hidden='true'>{formattedMinAmount}-{formattedMaxAmount}.</span><span class='sr-only'>{formattedMinAmount} to {formattedMaxAmount}</span>

现在遇到了一个棘手的问题：屏幕阅读器读取的时候，会把金额末尾的.00也读出来，比如读成299.00 to 6,000.00，但我希望它能读成299 to 6,000。而且这个问题只有在我添加了屏幕阅读器专用的span之后才出现，我实在弄不清原因，有没有哪位朋友之前遇到过类似的问题？求帮忙分析一下，非常感谢！

备注：内容来源于stack exchange，提问作者ericoder