Text Overflow Ellipsis For Multi-line Right To Left Text Direction

The text-overflow ellipsis working for single line ltr and rtl direction but ellipsis does not work with rtl direction. If I remove/change the direction of rtl everything runs fine

Solution 1:

I know this question is for a long time ago, but I answer it for other people having the same question.

I couldn't figure out the reason why it doesn't work for rtl. But I have made a trick!

1. First You should put an ellipsis: <span class="ellipsis">...</span>

2. Then you should make a blank space at the end of your text (It doesn't matter if your text is multi-line or single-line) Let's assume it is our text: <p class="text">blah blah</p>

   .text { max-height: 100%; overflow: hidden; }

this is going to be our blank space:

.text::after {
        content: '  ';
        display: block;
        width: 30px;
        height: 15px;
        background-color: white;
        float: left;
        z-index: 2;
        position: absolute;
    }

So when your text is multi-line, the white space will be hidden due to overflow: hidden style and you will see the ellipsis at the end of your text, and when your text is one line, the white space will overlap the ellipsis and cover it and you will see no ellipsis.

You may need to fix the position of your ellipsis and white space, so that the magic works well.

The snippet works well:

.text {
  height: 100%;
  overflow: hidden;
}

.text::after {
  content: '  ';
  display: block;
  width: 20px;
  height: 15px;
  background-color: pink;
  margin: 0px auto 0px0px;
  z-index: 2;
  position: relative;
}

.ellipsis {
  float: left;
  margin-top: -35px;
}

<divstyle="width: 200px; height: 35px; background: pink"><pclass="text"dir="rtl">این یک متن آزمایشی است</p><spanclass="ellipsis">...</span></div><br/><br/><divstyle="width: 200px; height: 35px; background: pink"><pclass="text"dir="rtl">این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است</p><spanclass="ellipsis">...</span></div>