用CSS开头的文本省略号？

Question

使用CSS获得此效果很简单：

  

这是一个很长的段落......

我们只是使用text-overflow:ellipsis。

然而反过来

  

...是一段很长的段落。

似乎不太明显。

我已阅读this comprehensive article，但the solution give there仍然不太理想。

这是实现它的CSS

.reverse-ellipsis {
  text-overflow: clip;
  position: relative;
  background-color: white;
}

.reverse-ellipsis:before {
  content: '\02026';
  position: absolute;
  z-index: 1;
  left: -1em;
  background-color: inherit;
  padding-left: 1em;
  margin-left: 0.5em;
}

.reverse-ellipsis span {
  min-width: 100%;
  position: relative;
  display: inline-block;
  float: right;
  overflow: visible;
  background-color: inherit;
  text-indent: 0.5em;
}

.reverse-ellipsis span:before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: inherit;
  z-index: 200;
  left: -.5em;
}

它的主要问题是它的长度以及省略号看起来有点偏差的事实。

有没有人知道一个更简洁的解决方案，使省略号保持一致？