text overflow ellipsis for multi-line right to left text direction

user_2034750 0
Viewed 316

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. what could be the bug?

index.html

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<style>
p{
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    float: right;
    text-align: right;
    display: -webkit-box;
    max-width: 165px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
    line-height: 15px;
    direction: rtl;
}
</style>
<body>

<p>At W3Schools you will find complete references about tags, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, and more.</p>

</body>
</html>
css html
1 Answers

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 0px 0px;
  z-index: 2;
  position: relative;
}

.ellipsis {
  float: left;
  margin-top: -35px;
}
<div style="width: 200px; height: 35px; background: pink">
  <p class="text" dir="rtl">این یک متن آزمایشی است</p>
  <span class="ellipsis">...</span>
</div>

<br/><br/>

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

user_136584460
Related