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

尝试一下：

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:
// var longText = $(document).find('.txt');
// var maxHeight = parseFloat(longText.css("max-height"));
//   while ($(longText).find(".ellipsis").outerHeight() > maxHeight) {
//     $(longText).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])*$/, '...');
//     });
//   }

.txt {
  direction: rtl;
  font-size: 20px;
  line-height: 25px;
  max-height: 50px;
  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 textyour 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>

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

2 个答案: