我有一些文件路径，我试图使用下面的代码在左侧显示省略号。
.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 中字符串的开头，它显示在结果内容的末尾。
有人可以解释一下这里有什么问题吗？
原因是您将书写方向设置为从右到左。由于其固有的（强）方向性，拉丁字母仍然从左到右呈现，并且它们之间的标点符号不会影响这一点。但是，如果以“/”开头的字符串，它将被视为具有从右到左的方向性。作为第一个字符，因此它被放置在最右边。
解决此问题的一种方法是在其前面添加 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">‎/C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll</span>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
