Strange special characters issue in left side ellipsis

Answer 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:

• https://code.google.com/p/chromium/issues/detail?id=155836
• https://code.google.com/p/chromium/issues/detail?id=171659

ellipsis on the left side.

see also:

• Text-overflow ellipsis on left side
• Needs use right "text-overflow" when "direction" is set to "rtl"
• http://davidwalsh.name/rtl-punctuation
• http://www.w3schools.com/tags/tag_bdi.asp

<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.

Answer 2

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 ‎.

    .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>