reserve-ellipsis 末尾省略前置 头部省略解决方法

问题描述

前几日遇到一个很蛋疼的需求，关于用户地址省略显示的——地址只能显示在一行内，如果地址过长要省略地址的头部，保留尾部，让用户能看见主要的地址详细
比如：

用户地址： 广东省广州市天河区大学城广州电子科技大学26栋303室
处理后

用户地址：...广州市天河区大学城广州电子科技大学26栋303室

解决方案

实现末尾省略有一个众所周知的方法：

white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;

而想要实现头部省略，有一个非常好用的css属性direction。

direction:ltr | rtl
ltr：文本流从左到右。
rtl：文本流从右到左。

使用此属性改变文本流方向，再结合末尾省略，便可达到头部省略的效果

        p {
            width: 200px;
            margin: 0;
            padding: 0;
            border: 1px solid #ccc;
            direction: rtl;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow-x: hidden;
        }
    <p>这是一段前半部分被省略了的字符</p></code></pre>
效果如下：
参数名
参数值



ps:但是此方法在safari浏览器不适用，在safari中，显示形式诡异

参数名
参数值



省略号提前了，但是省略的不是头部而是尾部，这可以看做是safari的一个bug（我更倾向于这种看法，毕竟这样处理真的让人无法理解）
官网上的反馈：

可使用的兼容方法
1.根据容器宽度进行截取
let p = document.getElementById('address'),addressStr='广东省广州市天河区大学城广州电子科技大学26栋303室';
if(p.clientWidth > addressStr.length*p.style.fonySize){
    addressStr = '...'+ addressStr.slice(addressStr.length*p.style.fonySize -p.clientWidth-3,addressStr.length);
}
2.可使用css的after和before做一个...将原数据遮盖。此方法会出现遮盖不全，露出半截字符的bug
待完善....