文本溢出显示省略号

标签：nbsp   单行   repeat   dde   space   tom   position   yun   pre   

一、css方式

1.单行文本

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

2.多行文本

p {
position:relative;
overflow:hidden;
}
p:after {
content:"...";
position:absolute;
bottom:0;
right:0;
background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

（需要用 js 处理文本不溢出不出现渐变半透明背景图，即多余省略号）

注：如不考虑文本复制问题，可简单粗暴的使用 js 配合 css 处理 （css：溢出隐藏，js ：文档节点绑定数据  || title 动效）

文本溢出显示省略号

标签：nbsp   单行   repeat   dde   space   tom   position   yun   pre   

原文地址：https://www.cnblogs.com/justSmile2/p/9451435.html