多行上的 CSS 省略号不适用于 RTL

Question

我有这个 css 代码

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

代码笔片段

带RTL

这对于多行 elpisis 工作正常，但是当文本是 RTL 时，我怎么能解决这个问题？

Answer 1

有效的跨浏览器解决方案

这个问题多年来一直困扰着我们大家。

为了在所有情况下提供帮助，我列出了仅 CSS 方法，以及 jQuery 方法，以防 css 警告出现问题。

这是我提出的一个仅 CSS 的解决方案，它适用于所有情况，但有一些小注意事项。

基础很简单，它隐藏跨度的溢出，并根据 Eugene Xa 的建议根据行高设置最大高度。

然后在包含 div 之后有一个伪类，可以很好地放置省略号。

注意事项

此解决方案将始终放置省略号，无论是否需要它。

如果最后一行以结束句结尾，您将得到四个点......

您需要对合理的文本对齐感到满意。

省略号将位于文本的右侧，这可能看起来很草率。

.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px;
  float: right;
}
.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
  direction: rtl;
  
}
.text.ellipsis::after {
  content: "...";
  position: absolute;
  left: -12px; 
  bottom: 5px;
}

<div class="text ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>