CSS、j's单行、多行文本溢出显示省略号
2018-06-24 00:21:25来源:未知 阅读 ()
在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低;所以在文字过多的时候,初始化限制行数是有必要的
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; }; });
这种情况会出现换行出现空行显示的现象,这个问题先留着,今天有些累了
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:HTML 表单
下一篇:移动端H5-第一课css篇
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash