css文本自动至右向左排
问题描述：
测试发现特殊字符，会导致页面布局混乱。当一组并列的span标签，第一个标签里面是特殊字符（并且还要第一个字符是阿拉伯语，希伯来语）的时候，导致这几个所有span标签的文本全默认自右向左排了。
这样就会出现一个明显的bug：我设置的几个text-overflow的省略三个点出现在了左边, 就像这样:
如上图，我把我的昵称改成了特殊字符，结果发现yy客户端的聊天窗口也出现了同样的问题！我发现事情可能并不简单！
出问题的html代码结构如下：
我试着把overflow: hidden去掉，果然文字从左边超出了天际：
解决思路：
最开始以为是自己的代码问题，各种修改样式，发现完全没效果。
تヅツッシÜϡ， 尝试各种修改代码无果之后，我就想试试是不是这个字符串的问题。然后我就一个一个删，最后还真发现，删了第一个的时候，恢复正常了。确定了是第一个字符影响了。直接复制第一个字符google， 发现这是阿拉伯字符。
搜索阿拉伯字符，发现是一些阿拉伯语，希伯来语会默认自右向左排，所以导致了，我后面几个同级的标签全部自右向左了。
哈哈，问题定位到了就好解决了，试了下在html中加 dir=”ltr”属性，依然无效。
之后试了给外层标签设置：
writing-mode，因为在cef(一种pc客户端内嵌h5网页的技术，其使用的是chrome内核)里面，他的chrome内核才是49版本，所以这个属性的值很少(属性值并不全)，设置一遍之后，发现没有生效:所以新建了一个测试页面，在chrome中调试，发现
writing-mode的所有属性都无效。所有都无效，差点放弃，最后在select框的div标签中加了dir=”ltr”属性，生效了！因为cef中不支持原生option选择框，所以我这里的选择框是异步生成的，导致在html中的 dir=”ltr”属性无效！到此终于解决了这个问题:
一波三折，终于解决了，也多亏了公司测试同事可以测出这个问题，在国内确实挺难发现这个问题，因为大家不认识阿拉伯字符，很多人第一感觉就当乱码处理了。而这个bug的出现又必须是阿拉伯字符，并且还一定是要在最前面，最好后面还得跟上几个并列的标签（里面有一大串文字），这样视觉上一看就是个bug， 把bug效果放大了。
后来想起来，之前一个新加坡的前端来公司做过一个分享，就是关于css文字方向的！这个问题确实有趣，解决的过程也相当有意思，故写个blog记录一下。