左侧省略号中出现奇怪的特殊字符问题

Question

我有一些文件路径,我试图使用下面的代码在左侧显示省略号.

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

现在,如果我将一个特殊字符(如Slash /字符)添加到HTML中字符串的开头,它将显示在结果内容的末尾.

有人可以解释这里有什么问题吗？

Answer 1

原因是您已将书写方向设置为从右到左.拉丁字母仍然由于其固有的(强)方向性而从左到右呈现,并且它们之间的标点符号不会影响这一点.但是如果你用"/"开始一个字符串,它被视为具有从右向左的方向性.作为第一个角色,它被放置在最右边.

修复此问题的一种方法是在其前面加上U + 200E LEFT-TO-RIGHT MARK字符,您可以使用HTML表示‎.

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