Question

如何将文字转发向后而不是转发？

看下面这两张图片......

通常，我会创建一个包含no width和white-space: nowrap的div来创建移动前进的文本。请注意，两张图片的箭头位于同一位置，但第二张图片的文本向后移动更多。 如何使用CSS实现同样的效果？

Answer 1

您可以使用右侧浮动一系列子元素来执行此操作：

＆＃13;

span {
    float: right;
}

＆＃13;

<div>
    <span>Text 1</span>
    <span>Text 2</span>
    <span>Text 3</span>
    <span>Text 4</span>
    <span>Text 5</span>
</div>

＆＃13;

或使用direction:rtl：

＆＃13;

div {
    direction: rtl;
}
span {
    direction: ltr;
    display: inline-block;
}

＆＃13;

<div>
    <span>Text 1</span>
    <span>Text 2</span>
    <span>Text 3</span>
    <span>Text 4</span>
    <span>Text 5</span>
</div>

＆＃13;

Answer 2

使用float: right; 或 text-align: right;

有很多解决方案可以做到这一点。