左侧省略号中出现奇怪的特殊字符问题 [英] Strange special characters issue in left side ellipsis

问题描述

我有一些文件路径，我试图用下面的代码在左边显示省略号。 =jsdata-hide =false>

.ellipsis：after {内容：..........................;背景颜色：白色;颜色：透明;位置：相对; z-index：2; } .ellipsis {方向：rtl;显示：inline-block;宽度：200px;白色空间：nowrap;溢出：隐藏;位置：相对;边框：1px纯黑色; z-index：3; } .ellipsis：before {content：...;背景颜色：白色;位置：绝对;左：0; z-index：1; }

 < span class =ellipsis> C ：\Program Files\Java\jre7\bin\\\
ew_plugin\\\
pdeployjava1.dll< /跨度>  

现在，如果我将一个特殊字符（如斜杠 / 字符）添加到HTML中字符串的起始位置，

有人可以解释这里有什么问题吗？

解决方案

原因是你已经设置了从右到左的书写方向。拉丁字母由于它们固有的（强）方向性而仍然从左到右呈现，并且它们之间的标点符号不会影响这一点。但是如果你用/开始一个字符串，它将被视为具有从右向左的方向性。作为第一个角色，它被放在最右边。

解决这个问题的一个方法是在它之前加上U + 200E左对齐标记字符，可以使用& lrm; 来表示HTML格式。

.ellipsis：after {content ： ..........................;背景颜色：白色;颜色：透明;位置：相对; z-index：2; } .ellipsis {方向：rtl;显示：inline-block;宽度：200px;白色空间：nowrap;溢出：隐藏;位置：相对;边框：1px纯黑色; z-index：3; } .ellipsis：before {content：...;背景颜色：白色;位置：绝对;左：0; z-index：1; }

<预类= 片段码-HTML语言HTML的prettyprint-越权> < p为H.问题：其中/ p为H. <跨度类= 省略号 > / C：\Program Files\Java\jre7\bin\\\
ew_plugin\\\
pdeployjava1.dll< /跨度>< p>使用左至右符号解决：其中/ p为H.<跨度类= 省略号 >&安培; LRM; / C：\Program Files\Java\jre7\bin\\\
ew_plugin\\\
pdeployjava1.dll< /跨度>

I have some file path, to which I am trying to show ellipsis on left side using the below code.

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

Now, if I add a special character like Slash / character, to the starting of the string in HTML, it is showing at the end of the content in result.

Could someone please explain what is the problem here?

解决方案

The reason is that you have set writing direction to right-to-left. Latin letters are still rendered left to right due to their inherent (strong) directionality, and punctuation between them does not affect this. But if you start a string with "/", it is treated as having right-to-left directionality. Being the first character, it is thus placed rightmost.

One way of fixing this is to precede it with the U+200E LEFT-TO-RIGHT MARK character, which you can represent in HTML using ‎.

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

这篇关于左侧省略号中出现奇怪的特殊字符问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！