多行上的 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 的方法，以及一个 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>