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

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>

现在，如果我在 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>