Strange special characters issue in left side ellipsis

Answer 1

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;
    }

Problem:

/C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll

Solved using left-to-right mark:

‎/C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll