将文本右对齐,向左溢出

Question

注意:上述链接问题未回答此问题,也不重复.这个问题解决了使用时特殊字符排序的问题,text-direction: rtl结果可以unicode-bidi: bidi-override通过下面的@Serlite指出来解决.

我有一个包含一些文本的div,我想要向左边溢出,而不是向右边.

例如,如果div包含字母表中的所有字母,则默认行为如下:

但是,我希望div的内容显示如下:

direction: rtl在该div的样式中使用可以很好地工作,并且对于上面的示例完美地实现了这种效果,以及如果内容仅包含数字(或字母数字字符的混合),如下所示.

标准行为:

设置后的行为direction: rtl:

在div中输入特殊字符时会出现问题,例如*和#.

将字符串设置*#0123456789为div内容会导致显示以下内容:

请注意*从字符串的开头到结尾的移动.

很难用图像显示问题,所以这里有一个快速的方法来更好地展示它.

一般来说,设置direction属性时似乎发生了奇怪的事情,所以我猜它可能不是那种方式.

当第一个字符溢出到左边时,有没有办法可以强制最后一个字符始终可见？

Answer 1

您观察到的意外重新排序是由于用于确定双向文本顺序的算法造成的。我不会详细介绍如何准确确定顺序，但基本上字符是按强方向性、弱方向性和中性方向性进行分类的，这用于在字符串中对它们进行排序。

您的字符串“*#02468”仅由具有弱方向性或中性方向性的字符混合组成，这意味着如果没有强方向性字符的上下文（例如阿拉伯文本，从右到左阅读），它们的顺序可能会出乎意料。根据您使用的字符，它们可能看起来与指定的相矛盾direction。

为了避免遇到这种行为，您可以使用该unicode-bidi属性来覆盖算法，并严格依赖指定的方向：

#rtl {
  direction: rtl;
  unicode-bidi: bidi-override;
}

如果您感兴趣，您还可以阅读更多有关该算法的逻辑顺序的内容。这有点太复杂了，无法详细介绍。

希望这可以帮助！如果您有任何疑问，请告诉我。

注意：如果您不希望字符串中的字符反转，那么这对您不起作用。在这种情况下，请采用不使用该direction属性的方法 - 因为这正是该属性的设计目的。