Text-Ellipse funktioniert nicht mit RTL-Richtung?

Question

Ich versuche, etwas Text zu zeigen, mit einer maximalen Höhe (des Textfelds) von 4 Zeilen, wenn der Text länger ist, möchte ich drei Punkte zeigen (...). Um diesen Effekt zu erreichen, dies ist der Code Ich verwende:

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

Diese im Grunde funktioniert genau so, wie ich will, aber die drei Punkte sind nicht angezeigt, wenn ich die Textrichtung auf rtl gesetzt. Kann nicht verstehen, was der Grund ist. 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

Bitte versuchen Sie dies. In CSS ist das nicht möglich.

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>