流向的改变(direciton与unicode-bidi)

改变水平流向的direction

direction有两种属性，direction:ltr(left to right)和 direction:rtl(right to left).他的作用是能够改变元素的水平呈现顺序。
使用场景1，如图1：

代码实现的效果使得图片出现的顺序颠倒，如图2所示

同样的道理，在某些需求中，在桌面客户端呈现中，确定按钮在左边，而在手机端中，考虑用户的方便性，确定按钮在右边，这个时候就能用到direction属性。值得一提的是，上述元素改为display：block时，会失效。
使用场景2，单行文字溢出为点显示，通常是在右边的，省略最后出现的文字。但是在direction的作用下，可以实现省略号在开头，显示最后出现的文字。

实现效果如图4所示

在此，我对图3中的css代码进行相关介绍。
在CSS3中，text-overflow属性的基本语法如下：

1. clip:表示不显示省略文本，简单的裁切。
2. ellipsis:表示对象文本溢出时显示省略标记，省略标记插入的位置是最后一个字符。
3. ellipsis-word：表示当对象文本溢出时显示省略标记，省略标记插入的位置是最后一个词（word）。
   实际上，text-overflow属性仅用于决定当文本溢出时是否显示省略标记，并不具备样式定义的功能，要实现溢出时产生省略号的效果，应该在定义两个样式：强制文本在一行内显示（white-space:nowrap）和溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示为省略号效果。
   小提示：direciton属性只能改变图片或者按钮的呈现顺序，但是纯字符内容（尤其是中文）好像没有什么效果。对于特殊的情况（指定中文每个字符都呈现反向效果，可以借助属性unicode-bidi）

direction的配合属性unicode-bidi

unicode兼容性比较好的几个属性：

1. unicode-bidi:normal;//默认值
2. unicode-bidi:embed;
3. unicode-bidi:bidi-override;
   normal正常排列，如果设置direction为rtl,则图片、按钮、问号、加号之类的字符会从右往左显示，但是中文字符和英文字符还是会从左往右
   embed作用在内联元素上。
   对于以上两者的区别，我们举个例子：

.rtl{
  direction: rtl;
  unicode-bidi: bidi-override;
  text-align: center;
}
<p class="rtl">我在外面<span style="unicode-bidi:normal;color:red;">我在中间</span>我在外面</p>
<p class="rtl">我在外面<span style="unicode-bidi:embed;color:red;">我在中间</span>我在外面</p>

上述代码的实际效果图为

unicode-bidi:bidi-override的作用是会强制所有字符按照dierction设置的方向全部反向排列