Text ellipsis not working with RTL direction?

user_1895488 0
Viewed 1473

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>

css html
2 Answers

Please try this. In css this is not possible.

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>

user_80243540

These answers are dynamic and support a number of lines that choose:

  • Option 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>

  • Option 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>

user_110465260
Related