文本溢出显示省略号

一、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 动效)

猜你喜欢

转载自www.cnblogs.com/justSmile2/p/9451435.html