浅析如何让css元素左侧自动溢出（即 ... 溢出在左侧）：direction 属性

一、需求背景：css 文本溢出时在开头（左边）显示省略号

1、首先设置溢出文本显示省略号

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

2、然后设置让文本从右到左显示

　　注意需要设置到最后一个层级的选择器上，举例来说，如果 dom层级是 div > p > span，则必须设置到 span 上；如果设置到了 div 或者 p 上面，则可能导致文字既没有倒序显示，也没有顺序显示，而是错乱显示了

.nowrap
　　direction: rtl;
　　unicode-bidi: bidi-override;
}

3、最后如果有需要，可以使用 js 颠倒文字原本的顺序，并显示颠倒后的结果即可：

const str = 'test'
const result = str.split('').reverse().join('')

二、CSS direction 属性

　　direction 属性规定文本的方向 / 书写方向。

　　unicode-bidi 属性与 direction 属性一起使用，设置或返回是否应重写文本以支持同一文档中的多种语言。

　　这 2 个属性以及这种左侧...的需求都比较偏门，了解即可，有需要的自己查下吧