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

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

右侧省略号

右侧的省略号与 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

左侧省略号。

另见：

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>标签。

Answer 2

原因是您将书写方向设置为从右到左。由于其固有的（强）方向性，拉丁字母仍然从左到右呈现，并且它们之间的标点符号不会影响这一点。但是，如果字符串以“/”开头，则它被视为具有从右到左的方向性。作为第一个字符，它因此被放置在最右边。

解决此问题的一种方法是在它前面加上 U+200E LEFT-TO-RIGHT MARK 字符，您可以使用 &lrm; 在 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 3

我找到了解决类似问题的方法：

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

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

Strange special characters issue in left side ellipsis

html

css

special-characters

右侧省略号

左侧省略号。

特殊字符未显示 `direction: rtl`?

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

Strange special characters issue in left side ellipsis

html

css

special-characters

右侧省略号

左侧省略号。

特殊字符未显示 direction: rtl?

特殊字符未显示 `direction: rtl`?