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

它的主要问题是长度过长，而省略号看起来有点不协调。

是否有人知道一个更短的解决方案，可以让省略号保持一致？

- U r s u s

---

阅读此文章的评论- http://codepen.io/kizu/pen/NPrbEQ - Alex

你应该转述（并可能演示）所引用页面上描述的方法，并解释为什么它们对你来说有问题。仅仅要求“更好”的解决方案，而不是在SO上描述的外部页面，这真的是离题了。 - Jukka K. Korpela

@Quentin 美国 ▸ 华盛顿州 ▸ 海洋之滨 ▸ 科普利斯海滩 与 ...美国 ▸ 华盛顿州 ▸ 海洋之滨 ▸ 科帕利斯海滩 - Salman A

@Quentin，我得到了一个文件路径，我宁愿向用户显示路径的结尾而不是开头，比如说...168.1.1/file.pdf，而不是192.168.1.1/f...。在我看来，这个问题应该是公开讨论的，而不是基于个人意见。 - karoluS

这个问题并没有“基于观点”的成分。他只是在问如何做某件事情（我也是为了找到这里才搜索的）。仅仅因为人们可以点击“关闭问题”按钮，就让他们认为无缘无故地频繁使用它。 - Glenn Maynard

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.
  </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.
  </p>
</div>

- Dipak