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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在，如果我将一个特殊字符（如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>

Answer 2

我为我的类似问题找到了这个解决方案：

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

Answer 3

右侧的省略号

右侧的省略号overflow: hidden和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

相关问题：

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

左侧的省略号。

另见：

• 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>用于该意图，但并非所有浏览器都支持。

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

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

未显示direction: rtl的特殊字符？

他们正在展示......删除overflow: hidden以说服自己;但根据浏览器的实施情况，它们会显示出意外的位置。一个解决方案它并不适用于所有浏览器;是使用<bdi>标记。