将文字对齐，向左溢出

Question

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

我有一个包含一些文字的div，我想要向左边溢出，而不是向右边。

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

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

在该div的样式中使用direction: rtl可以正常工作，并且对于上面的示例完美地实现了此效果，以及内容是否只包含数字（或字母数字字符的混合），如下所示。 / p>

标准行为：

设置direction: rtl后的行为：

在div中输入特殊字符时会出现问题，例如*和＃。

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

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

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

一般来说，设置direction属性时似乎发生了奇怪的事情，因此我猜测它可能不是那样的。

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

Answer 1

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

你的字符串“*＃02468”仅由具有弱或中性方向性的混合字符组成，这意味着它们的排序可能是意外的，没有强烈方向性的上下文（如阿拉伯语文本，从右向左阅读） 。根据您使用的字符，它们可能与指定的direction相矛盾。

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

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

这是一个updated JSFiddle。

如果您有兴趣，还可以在logical ordering of this algorithm上阅读更多信息。详细介绍一下有点过于复杂。

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

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

Answer 2

编辑使用text-indent和text-align可能不那么棘手：

input {
  width: 200px;
  font-size: 30px;
  border:none;
  background:none;
  color:white;
  background:#26A0DA;
}
#rtl {
  text-align: right;
  text-indent: -9999px;
}
label {
  display:inline-block;
  line-height:2em;
  padding:0 5em;
  background:#26A0DA;
  }
  

<label for="ltr">ltr
  <input id="ltr" value="*#02468456789" />
</label>

<label for="rtl">rtl
  <input id="rtl" value="*#02468456789" />
</label>

从我的评论中，我也会得到一个有趣的答案：任何反馈意见

input {
  width: 200px;
  font-size: 30px;
}
label {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  margin:0 2em;
  background:gray;
}
#rtl {
  float: right;
  text-align: right;
  width: 900px;/* whatever */
  margin-left: -900px;/* at least as much as width to give a virtual width close to null, so it sticks at right but do not get pushed  */
}

<label for="ltr">ltr
  <input id="ltr" value="*#abcdefghijklmnopqrstuv" />
</label>

<label for="rtl">rtl
  <br/>
  <input id="rtl" value="*#abcdefghijklmnopqrstuv" />
</label>

https://jsfiddle.net/8zbzy4sL/7/

Answer 3

您可以在 town tc variable value mn sdev outlier 1: A C one 0.5681578 0.2981842 0.355652 0 2: A D one 0.5528128 1.2099018 1.020525 0 3: A C one 0.5214274 0.2981842 0.355652 0 4: A D one 1.4171454 1.2099018 1.020525 0 5: A C one 0.5820994 0.2981842 0.355652 0 --- 156: B D total 23.4462542 27.8820524 3.807119 1 157: B C total 30.5934956 28.9524305 1.078307 1 158: B D total 30.5618759 27.8820524 3.807119 0 159: B C total 27.5940307 28.9524305 1.078307 1 160: B D total 24.8378437 27.8820524 3.807119 0

中使用float:right和text-align:right

input

input {
  width: 200px;
  font-size: 30px;
}
#rtl, label:last-of-type {
  float: right;
  text-align: right;
}

Answer 4

您可以使用CSS position来完成这项工作。为了您的目的，您需要创建两个div。父div和子div。子div包含文本并具有ltr方向。

.box {
    width: 500px;
    height: 50px;
    padding-top: 20px;
    background: #26A0DA;
}

.parent {
    width: 300px;
    height: 30px;
    margin: 0px auto;
    position: relative;   
    overflow: hidden; 
}
  
.child {
   position: absolute;
   right: 0px;
   font-family: arial;
   font-size: 25px;
   color: #eee;
}

<div class="box">
    <div class="parent">
        <div class="child">abcdefghijklmnopqrstuvwxyz</div>
    </div>
</div>