I'm trying to show some text, with a maximum height (of the text box) of 4 lines, if the text is longer I want to show three dots (...). To achieve this effect this is the code I'm using:
.txt{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
This is basically working exactly as I want, BUT the three dots are not shown if I set the text direction to rtl. Can't understand what is the reason. 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>