作者:麦尔小哈PICA | 来源:互联网 | 2023-05-26 17:39
我有一些文件路径,我试图使用下面的代码在左侧显示省略号.
.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;
}
C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll
现在,如果我将一个特殊字符(如Slash /
字符)添加到HTML中字符串的开头,它将显示在结果内容的末尾.
有人可以解释这里有什么问题吗?
1> Jukka K. Kor..:
原因是您已将书写方向设置为从右到左.拉丁字母仍然由于其固有的(强)方向性而从左到右呈现,并且它们之间的标点符号不会影响这一点.但是如果你用"/"开始一个字符串,它被视为具有从右向左的方向性.作为第一个角色,它被放置在最右边.
修复此问题的一种方法是在其前面加上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;
}
Problem:
/C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll
Solved using left-to-right mark:
/C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll