用CSS开头的文本省略号？

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

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

我们只是用text-overflow:ellipsis.

然而相反

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

似乎不太明显.

我已经阅读了这篇全面的文章,但解决方案给出的还是不太理想.

这是实现它的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;
}

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

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