你如何实现这种向后分区效应？

Question

你如何让文字倒退而不是转发？

看看这两个以下图片...

---

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

Answer 1

可以使用右浮在一系列子元素的做到这一点：

span { 
 
    float: right; 
 
}

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

或者使用direction:rtl：

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

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

Answer 2

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

有很多解决方案，做到这一点的。

http://www.w3schools.com/cssref/pr_class_float.asp
http://www.w3schools.com/cssref/pr_text_text-align.asp