首页 > 代码库 > [工作经验]前端开发过程中常用技巧总结
[工作经验]前端开发过程中常用技巧总结
多行文本溢出显示省略号(...)的方法
现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号。
如：
单行文本：
overflow:hidden;white-space:nowrap;text-overflow:ellipsis一些其他技巧可参考：http://www.zhangxinxu.com/wordpress/?p=230
多行文本：
text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢？
除了各个浏览器私有的属性，有没有跨浏览器的解决方法呢？当然是通过js实现啦！（通过从后向前逐个删除末尾字符，直至元素的高度小于父元素高度）
$(".content").each(function(i){ var divH = $(this).height(); var $p = $("p", $(this)).eq(0); while ($p.outerHeight() > divH) { $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...")); };});
[工作经验]前端开发过程中常用技巧总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。