用CSS开头的文本省略号？

Question

使用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;
}

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

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

Answer 1

根据此文档，现在可以了。我在下面添加了一个工作示例。

{
  direction: rtl;
  text-overflow: ellipsis;
}

{
  direction: rtl;
  text-overflow: ellipsis;
}

div {
  margin: 5px;
  background: #ccc;
  padding: 10px;
  width: 500px;
}

.box {
    line-height: 50px;
    border: 1px solid #000;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    padding: 0 0.5em;
    text-align: left;
}

.el-normal {
  text-overflow: ellipsis;
}


.el-reverse {
  direction: rtl;
  text-overflow: ellipsis;
}