星空网 > 软件开发 > 网页设计

CSS、js单行、多行文本溢出显示省略号

在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低;所以在文字过多的时候,初始化限制行数是有必要的

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、js单行、多行文本溢出显示省略号

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

美国政府部分关门,关税上调日期延至2019年3月2日!:https://www.ikjzd.com/articles/13781
你知道你的开曼公司年审时间到了吗?:https://www.ikjzd.com/articles/137810
【邮件营销和红人营销】打造1000W独立站客户来源:https://www.ikjzd.com/articles/137811
选品选的好 中东电商户外品类也能火:https://www.ikjzd.com/articles/137812
12.7亿的非洲市场,做好这几步快速抢占先机:https://www.ikjzd.com/articles/137818
传美国纽约拟立法征收在线订单税:https://www.ikjzd.com/articles/137819
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流