多行的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;
}

codepen snippet

使用RTL

对于多行elpisis工作正常但是当文本是RTL时却没有 我该怎么办呢？

Answer 1

跨浏览器解决方案

这个问题困扰了我们很多年。

为在所有情况下提供帮助，我设计了仅CSS的方法，以及在css警告有问题的情况下设计的jQuery方法。

这是我想出的仅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>