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

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

<div>
  <h3>Normal</h3>
  <p class="box el-normal">
  Getting this effect with CSS it's easy: This is a very long para We just just use text-overflow:ellipsis. However the reverse is a very long paragraph. seems less obvious.&lrm; 
  </p>
  <h3>Reverse</h3>
  <p class="box el-reverse">
  Getting this effect with CSS it's easy: This is a very long para We just just use text-overflow:ellipsis. However the reverse is a very long paragraph. seems less obvious?&lrm; 
  </p>
</div>

更新：

正如@jo-gro提到的

不适用于标点符号。 “你好吗？”变成“？Hello how are you”...但是你可以在字符串末尾添加u200e来解决这个问题