首页 > 代码库 > CSS、j's单行、多行文本溢出显示省略号
CSS、j's单行、多行文本溢出显示省略号
在项目中，由于实际描述文字过多，导致初始页面纵向长度过长，也使得余下信息利用率降低；所以在文字过多的时候，初始化限制行数是有必要的
1. CSS单行文本溢出，显示省略号
<div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> 我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出。</div>
2. CSS多行文本溢出，显示省略号
<div style="overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;"> 我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本。</div>
上面两种适合标签里面只有文字的情况，而有时我们会遇到这样的情况
<div> <p> <span>我是内容</span> </p> <p> <span>我是内容</span> </p> <p> <span>我是内容</span> </p> <p> <span>我是内容</span> </p></div>
3. 第三种就是解决上面情况遇到的问题
我在网上看了很多例子，各有各的好，我使用的是给固定的line-height，换行也是每行在固定的的高度，如：line-height:20px;，每次换空行也要让空行是20px，这样我们就可以利用20的倍数来合理的显示内容要显示的行数和内容
<div class="text"> <p> 你不想要改变世界，但是你想要看日出？想要体验下传说中的晨跑？想在晨跑中偶遇男神女神？想要看下早上5点图书馆或训练场是否有人？想呼吸下还没被汽车尾气过度渲染的空气？想给自己给爱人做个早餐？你得早起呀！昨晚事情没做完？考研单词还差几页？赶飞机、赶火车？你得早起呀！你不想上班也得早起请假不是嘛～ </p> <p> 欢迎大家参加早起的鸟儿有虫吃－21天早起计划。一日之计在于晨，在沐浴晨光的过程中，我们祝愿大家开始美好的一天！ </p> <span class="points">...</span></div>
.text{color:#707070;padding:0 12px;position:relative;line-height:20px;overflow:hidden;margin-bottom:12px;max-height:60px;}.points{content:"...";position:absolute;bottom:0;right:16px;padding-left:40px;font-size:18px;letter-spacing:3px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%);}.text p{margin:0;}.text p+p{margin-top:20px;}
// 字体显示 var showBoo = true; $(‘.de-box .text‘).on(‘click‘,function(){ if(showBoo){ console.log(1); $(‘.de-box .text‘).css(‘maxHeight‘,‘none‘); $(‘.de-box .points‘).hide(); showBoo = false; }else{ $(‘.de-box .text‘).css(‘maxHeight‘,‘60px‘); $(‘.de-box .points‘).show(); showBoo = true; }; });
这种情况会出现换行出现空行显示的现象，这个问题先留着，今天有些累了
CSS、j's单行、多行文本溢出显示省略号
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。