我无法以正确的方式在进度条样式中插入省略号

Question

只要文字简短，我可以使用任何百分比，并且该组件是完美的。 当文本很长时，我使用省略号，黑色文本（在背景中）效果很好。当百分比变量大于90％时，问题很明显。如果将规则放在.fgt类上，则省略号效果将是错误的。

这里是codepen link。

HTML

<div class="wrap">
  <div class="bg">
    <p class="bgt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="fg">
    <p class="fgt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div>

SCSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.wrap {
  position: relative;
  width: 500px;
}
.wrap .bg {
  padding: 5px 10px;
  position: relative;
}
.wrap .bgt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: black;
}
.wrap .fg {
  border-radius: 60px 0 0 60px;
  padding: 5px 10px;
  background-color: #333;
  position: absolute;
  top: 0;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
}
.wrap .fgt {
  color: white;
}

交叉浏览很重要。

我该如何解决问题？

谢谢大家。