2

I have some file path, to which I am trying to show ellipsis on left side using the below code.

    .ellipsis:after {
        content:"..........................";
        background-color: white;
        color: transparent;
        position: relative;
        z-index: 2;
    }
    .ellipsis {
        direction: rtl;
        display: inline-block;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        border: 1px solid black;
        z-index: 3;
    }
    .ellipsis:before {
        content:"...";
        background-color: white;
        position: absolute;
        left: 0;
        z-index: 1;
    }
<span class="ellipsis">C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll</span>

Now, if I add a special character like Slash / character, to the starting of the string in HTML, it is showing at the end of the content in result.

Could someone please explain what is the problem here?

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
  • possible duplicate of [Text-overflow ellipsis on left side](http://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side) – dnozay Jan 15 '15 at 06:12
  • possible duplicate of http://stackoverflow.com/questions/18532256/needs-use-right-text-overflow-when-direction-is-set-to-rtl – dnozay Jan 15 '15 at 06:14
  • @dnozay not at all duplicate. As you can see, I got ellipsis on left side. I am asking here for explanation of the issue causing by special characters. – Mr_Green Jan 15 '15 at 07:17

3 Answers3

9

The reason is that you have set writing direction to right-to-left. Latin letters are still rendered left to right due to their inherent (strong) directionality, and punctuation between them does not affect this. But if you start a string with “/”, it is treated as having right-to-left directionality. Being the first character, it is thus placed rightmost.

One way of fixing this is to precede it with the U+200E LEFT-TO-RIGHT MARK character, which you can represent in HTML using &lrm;.

    .ellipsis:after {
        content:"..........................";
        background-color: white;
        color: transparent;
        position: relative;
        z-index: 2;
    }
    .ellipsis {
        direction: rtl;
        display: inline-block;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        border: 1px solid black;
        z-index: 3;
    }
    .ellipsis:before {
        content:"...";
        background-color: white;
        position: absolute;
        left: 0;
        z-index: 1;
    }
<p>Problem:</p>

<span class="ellipsis">/C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll</span>

<p>Solved using left-to-right mark:</p>

<span class="ellipsis">&lrm;/C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll</span>
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Sadly, this doesn't help for special characters at the *end* of the string. "C:\Program Files\Java\jre7\bin\new_plugin‎\" is rendered as "\C:\Program Files\Java\jre7\bin\new_plugin". – Peter Oct 20 '19 at 21:56
  • Peter, that's a different question. When you have a punctuation character at the end of a string, you need to put the left-to-right mark after it, so that it has left-to-right characters on both sides of it and it therefore gets that directionality, even in an overall right-to-left environment. You would thus need "C:\Program Files\Java\jre7\bin\new_plugin\‎". – Jukka K. Korpela Oct 26 '19 at 13:17
0

I found this solution for my similar problem:

        .ellipsis {
            display: inline-block;
            width: 200px;
            white-space: nowrap;
            overflow: hidden; /* If too small cut ... */
            text-overflow: ellipsis; /* ... with ellipsis... */
            direction: rtl; /* ...but cut from the left */
            white-space: nowrap; /* prevent multi line even for chinese chars */
            position: relative;
            border: 1px solid black;
            z-index: 3;
        }
<span class="ellipsis"><bdi>\C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll</bdi></span>
HolgerJeromin
  • 2,201
  • 20
  • 21
-1

ellipsis on the right side

ellipsis on the right side with overflow: hidden and text-overflow: ellipsis:

.ellipsis {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid black;
}

http://plnkr.co/edit/LYx2LPumbMZkIDp7no2m?p=preview

Related issues:

ellipsis on the left side.

see also:

<bdi> is used for that intent but is not supported on all browsers.

<span class="ellipsis"><bdi>C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll////</bdi></span>

http://plnkr.co/edit/zLPRCQ2ggTAclf7XaQsM?p=preview

special characters not showing with direction: rtl?

They are showing... remove overflow: hidden to convince yourself; but they are showing somewhere unexpected depending on browser implementation. One solution; which isn't working across all browsers; is to use the <bdi> tag.

Community
  • 1
  • 1
dnozay
  • 23,846
  • 6
  • 82
  • 104
  • "I have some file path, to which I am trying to show ellipsis on right side using the below code." did you say **right side**? – dnozay Jan 15 '15 at 07:31
  • ahh my bad.. got confused. – Mr_Green Jan 15 '15 at 07:35
  • I am not looking for left or right side ellipsis solution. I just want explanation on why special characters are behaving strange on my above provided code. – Mr_Green Jan 15 '15 at 07:39
  • I would say file a bug where it does not behave as expected; and with some luck it will be fixed soon. – dnozay Jan 15 '15 at 07:43