首页 > 其他 > 详细

文本溢出显示省略号

时间:2018-08-09 20:39:07      阅读:172      评论:0      收藏:0      [点我收藏+]

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

文本溢出显示省略号

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!