首页 > 代码库 > 多行文本超出部分以省略号显示
多行文本超出部分以省略号显示
看到这样的效果，首先想到的是css3，真的能解决吗？百度了一下还真的可以
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
BUT，这是什么？ -webkit- 这是指的在WebKit内核的浏览器才能看到的效果。所以这就是没有用的。
然后又看了其他的很多写法，并没有实现自己想要的效果。决定用js来控制
<p class="ellipsis">
我要在第二行的时候多余隐藏！我要在第二行的时候多余隐藏！我要在第二行的时候多余隐藏！我要在第二行的时候多余隐藏！我要在第二行的时候多余隐藏！我要在第二行的时候多余隐藏！我要在第二行的时候多余隐藏！</p>
.ellipsis{
width: 500px;
line-height: 23px;
}
$(function(){ $(".ellipsis").each(function(){ var maxwidth=36; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).text($(this).html()+‘…‘); } }); })
需要先引入 jQuery.js
原理解析：设置一个最大的字符数，判断当文本内容超出了最大的字符数时，然后截取，最后显示。
此为效果：
*下载的插件没看懂怎么用了，愣是不出效果，只能自己写*
多行文本超出部分以省略号显示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。