将文本右对齐，向左溢出[重复]

This question already has an answer here:

这个问题在这里已有答案：

Overflow to left instead of right 5 answers
向左溢出而不是向右溢出5个答案

Note: This question is not answered in the above linked question, nor is it a duplicate. This question addresses the problem with the ordering of special characters when using text-direction: rtl, which it turns out can be solved with the unicode-bidi: bidi-override as pointed out by @Serlite below.

注意：此问题未在上述链接问题中得到解答，也不是重复问题。这个问题解决了使用文本方向时特殊字符排序的问题：rtl，结果可以通过unicode-bidi：bidi-override解决，如下面@Serlite所指出的。

I have a div containing some text that I'd like to overflow to the left, not to the right.

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

For example, if the div contains all letters of the alphabet, the default behaviour is as follows:

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

I, however, want the contents of the div to be displayed like this:

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

Using direction: rtl in the styles for that div works fine, and achieves this effect perfectly for the above example, as well as if the contents contains just numbers (or a mix of alphanumeric characters) as shown below.

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

Standard behaviour:

标准行为：

Behaviour after setting direction: rtl:

设定方向后的行为：rtl：

The problem occurs when special characters are entered into the div, such as * and #.

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

Setting the string *#0123456789 as the div contents causes the following to be displayed:

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

Note the * moving from the start of the string to the end.

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

It's difficult to show the problem with just images, so here is a quick jsfiddle to better demonstrate it.

仅用图像来展示问题是很困难的，所以这里有一个快速的方法可以更好地展示它。

In general, it seems like weird things happen when setting the direction property, and so I'm guessing it's probably not the way to go.

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

Is there a way I can force the last characters to always be visible while the first characters overflow to the left?

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

4 个解决方案

#1

The unexpected reordering you're observing is due to an algorithm used for determining the ordering of bi-directional text. I won't go into details on how the ordering is exactly determined, but basically characters are classified by strong, weak, and neutral directionality, which is used to order them in a string.

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

Your string "*#02468" consists only of a mix of characters with weak or neutral directionality, meaning their ordering may be unexpected without the context of a strongly directional character (like Arabic text, which reads right-to-left). Depending on the characters you use, they may seem to contradict the specified direction.

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

To avoid this behaviour you're encountering, you can use the unicode-bidi property to override the algorithm, and rely strictly on the specified direction:

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

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

Here's an updated JSFiddle.

这是一个更新的JSFiddle。

You can also read up a bit more on the logical ordering of this algorithm, if you're interested. It's a bit too complex to go into detail about.

如果您有兴趣，还可以阅读更多关于此算法的逻辑顺序的内容。详细介绍一下有点过于复杂。

Hope this helps! Let me know if you have any questions.

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

Note: If you don't want the characters in your string reversed, this won't work for you. In that case, go with an approach that doesn't use the direction property - because that's exactly what the property was designed for.

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

#2

EDIT Maybe a less tricky way with text-indent and text-align:

编辑使用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>

from my comment, i'll also go with a funny answer : any feed back appreciated

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

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/

#3

You can use CSS position to do this work. For your purpose you need to create two div. Parent div and child div. Child div contain text and has ltr direction.

您可以使用CSS位置来完成这项工作。为了您的目的，您需要创建两个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>

#4

you can use float:right and text-align:right in input

你可以在输入中使用float：right和text-align：right

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

<label for="ltr">ltr
  <input id="ltr" value="*#02468" />
</label>
<hr />
<label for="rtl">rtl
  <input id="rtl" value="*#02468" />
</label>

#1