html – 将文本右对齐,向左溢出

发布时间：2020-12-14 16:38:48 所属栏目：资源来源：网络整理

导读：参见英文答案 Overflow to left instead of right5个注意：此问题未在上述链接问题中得到解答,也不是重复问题.这个问题解决了使用文本方向时特殊字符排序的问题：rtl,结果可以通过unicode-bidi：bidi-override解决,如下面@Serlite所指出的那样. 我有一个包

参见英文答案 > Overflow to left instead of right5个
注意：此问题未在上述链接问题中得到解答,也不是重复问题.这个问题解决了使用文本方向时特殊字符排序的问题：rtl,结果可以通过unicode-bidi：bidi-override解决,如下面@Serlite所指出的那样.

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

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

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

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

标准行为：

设定方向后的行为：rtl：

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

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

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

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

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

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

解决方法

您正在观察的意外重新排序是由于用于确定双向文本排序的算法.我不会详细说明排序是如何确定的,但基本上字符按强,弱和中性方向性分类,用于在字符串中对它们进行排序.

您的字符串“*#02468”仅由具有弱或中性方向性的混合字符组成,这意味着它们的排序可能是意外的,没有强方向性字符的上下文(如阿拉伯语文本,从右向左读取).根据您使用的字符,它们可能看起来与指定的方向相矛盾.

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

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

这是updated JSFiddle.

如果您有兴趣,还可以在logical ordering of this algorithm上阅读更多内容.详细介绍一下有点过于复杂.

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

注意：如果您不希望字符串中的字符被反转,则这对您不起作用.在这种情况下,请使用不使用direction属性的方法 – 因为这正是属性的设计目标.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!