文本省略号不能与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>