首页 > 代码库 > 移动端文本超出设定行数后省略的方法
移动端文本超出设定行数后省略的方法
因为移动端绝大部分是WebKit内核的浏览器,如果纯粹的要实现文本在超出规定行数后,其余内容省略并加上“...”,可以直接使用WebKit私有属性:-webkit-line-clamp来实现
css代码
.box{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html代码
<div class="box">001A航母的建成标志着中国成为世界上少数几个可以独立建造航母的国家,由于中国处在快速发展蓝水海军的进程中,在不远将来中国拥有多支航母编队是可以预期的,中国建设强大海军的帷幕真正拉开了。</div>
那如果还需要有一个展开全部和收起的操作,那光用css是无法实现的。
这边推荐一个比较成熟的jQuery插件-jQuery.dotdotdot 下载地址
首先引入jquery.js和dotdotdot.js
html代码
<div class="dotbox"> 001A航母的建成标志着中国成为世界上少数几个可以独立建造航母的国家,由于中国处在快速发展蓝水海军的进程中,在不远将来中国拥有多支航母编队是可以预期的,中国建设强大海军的帷幕真正拉开了。 </div>
css代码
.dotbox.opened {height: auto;}/*展开后容器高度自适应*/ .dotbox .close,.dotbox .open,.dotbox.opened .open {display: none;}/*默认展开收起按钮隐藏,展开时展开按钮隐藏*/ .dotbox.is-truncated .open,.dotbox.opened .close {display: inline-block;}/*超出规定行数展开按钮显示,展开后收起按钮显示*/ .dotbox{line-height: 18px;height:36px;color: #333;} .more-btn{display:block;color: #333;line-height: 18px;}
.toggle{display:block;}
js代码
<script type="text/javascript">
$(function(){
var $dot = $(‘.dotbox‘);
$dot.append(‘<a class="toggle"><span class="more-btn open">查看全部</span><span class="more-btn close">收起</span></a>‘);
function createDots() {
$dot.dotdotdot({
after: ‘a.toggle‘
});
}
function destroyDots() {
$dot.trigger(‘destroy‘);
}
createDots();
$dot.on(
‘click‘,
‘a.toggle‘,
function() {
$dot.toggleClass(‘opened‘);
if ($dot.hasClass(‘opened‘)) {
destroyDots();
} else {
createDots();
}
return false;
}
);
})
</script>
移动端文本超出设定行数后省略的方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。