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

<div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
    我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出。
</div>

<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>

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