问题描述
前几日遇到一个很蛋疼的需求，关于用户地址省略显示的——地址只能显示在一行内，如果地址过长要省略地址的头部，保留尾部，让用户能看见主要的地址详细
比如：
用户地址： 广东省广州市天河区大学城广州电子科技大学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
待完善.... （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
| 