HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 查看内容

CSS、j's单行、多行文本溢出显示省略号

2016-9-13 09:20| 发布者: Hyukoh| 查看: 821| 评论: 0|原作者: 怪诞咖啡|来自: cnblogs

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

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


  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;
        };
    });

原文链接:http://www.cnblogs.com/liu-fei-fei/archive/2016/09/12/5865994.html
来源作者:怪诞咖啡

鲜花

握手

雷人

路过

鸡蛋
更多

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-20 03:19

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部