文本省略号不适用于 RTL 方向？

Question

我正在尝试显示一些文本，最大高度（文本框）为 4 行，如果文本较长，我想显示三个点（...）。为了达到这种效果，这是我正在使用的代码：

.txt{
    overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

这基本上完全按照我的意愿工作，但是如果我将文本方向设置为rtl，则不会显示三个点。无法理解是什么原因。 CodePen here.

.wrapper {
  padding: 10px;
  background: #eaeaea;
  max-width: 400px;
  margin: 20px;
}

.txt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.demo-1 {
  direction: ltr;
}

.demo-2 {
  direction: rtl;
}

<div class="wrapper">
  <p class="demo-1 txt">Working as intended.<br> 1daklssdj alskdj alkdjaslkdj alkdj alkdjalkdjalkdj alskdjalskdjlaskdj alkdj alkdj alkdjalkdjalkdj alskdjal skdj alksdj alskdj alkdj alksdj alskdj alskdj laskdj alksdj alkjd laksdj alskdj alskdj alkdj alskdj alskdj aslkdj alk</p>
</div>

<div class="wrapper">
  <p class="demo-2 txt">NOT working. Why?? <br>daklsdj alskdj alkdjaslkdj alkdj alkdjalkdjalkdj alskdjalskdjlaskdj alkdj alkdj alkdjalkdjalkdj alskdjal skdj alksdj alskdj alkdj alksdj alskdj alskdj laskdj alksdj alkjd laksdj alskdj alskdj alkdj alskdj alskdj aslkdj alk</p>
</div>

Answer 1

请试试这个。在 css 中这是不可能的。

var myid=document.getElementById('txt1');
myid.innerHTML=myid.innerHTML.substring(0,241)+'...';

var myid=document.getElementById('txt2');
myid.innerHTML=myid.innerHTML.substring(0,241)+'...';

.wrapper {
  padding: 10px;
  background: #eaeaea;
  max-width: 400px;
  margin: 20px;
}
.demo-1 {
  direction: ltr;
}
.demo-2 {
  direction: rtl;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <p class="demo-1 txt" id="txt1">Working as intended.<br> 1daklssdj alskdj alkdjaslkdj alkdj alkdjalkdjalkdj alskdjalskdjlaskdj alkdj alkdj alkdjalkdjalkdj alskdjal skdj alksdj alskdj alkdj alksdj alskdj alskdj laskdj alksdj alkjd laksdj alskdj alskdj alkdj alskdj alskdj aslkdj alk</p>
</div>

<div class="wrapper">
  <p class="demo-2 txt" id="txt2">NOT working. Why?? <br>daklsdj alskdj alkdjaslkdj alkdj alkdjalkdjalkdj alskdjalskdjlaskdj alkdj alkdj alkdjalkdjalkdj alskdjal skdj alksdj alskdj alkdj alksdj alskdj alskdj laskdj alksdj alkjd laksdj alskdj alskdj alkdj alskdj alskdj aslkdj alk</p>
</div>

Answer 2

这些答案是动态的，并支持许多可供选择的行：

• 选项 1：

var longText = $(document).find('.txt');
var maxHeight = parseFloat(longText.css("max-height"));
$.each(longText, function(index, longTextItem) {  //for two elements
  while ($(longTextItem).find(".ellipsis").outerHeight() > maxHeight) {
    $(longTextItem).find(".ellipsis").text(function(index2, txt) {
      return txt.replace(/[^\u0590-\u05FFA-Za-z0-9_]*[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]([^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff])*$/, '...');
    });
  }
});

//For one element remove the 'each' loop and replace the variable's name 'longTextItem' with 'longText'

.txt {
  direction: rtl;
  font-size: 20px;
  line-height: 25px;
  max-height: 100px;
  max-width: 200px;
  overflow: hidden;
  margin: 0 auto;
}

// max-height = line-height * num of lines you want support

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="txt">
  <div class="ellipsis">
    your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text
  </div>
</div>
</br>
<div class="txt">
  <div class="ellipsis">
    הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך
  </div>
</div>

• 选项 2：

var longText = $(document).find('.txt');
var maxHeight = parseFloat(longText.css("max-height"));
$.each(longText, function(index, longTextItem) {  //for teo elements
  while ($(longTextItem).find(".ellipsis").outerHeight() > maxHeight) {
    $(longTextItem).find(".ellipsis").text(function(index2, txt) {
      return txt.substring(0, txt.length - 1);
    });
  }
  $(longTextItem).find(".ellipsis").text(function(index2, txt) {
    return txt.substring(0, txt.length - 3) + '...';
  });
});

//For one element remove the 'each' loop and replace the variable's name 'longTextItem' with 'longText'

.txt {
  direction: rtl;
  font-size: 20px;
  line-height: 25px;
  max-height: 100px;
  max-width: 200px;
  overflow: hidden;
  margin: 0 auto;
}

// max-height = line-height * num of lines you want support

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="txt">
  <div class="ellipsis">
    your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text your text
  </div>
</div>
</br>
<div class="txt">
  <div class="ellipsis">
    הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך הטקסט שלך
  </div>
</div>