多行文字溢出点点点的3中实现方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        font: 14px/22px "Microsoft Yahei";
    }
    p{
        width: 300px;
        margin: 50px auto;
    }
    .test1{
        -webkit-line-clamp: 3;    /*用来限制在一个块元素显示的文本的行数*/
        display: -webkit-box;    /*必须结合的属性，将对象作为弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical;    /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
        overflow: hidden;
　　　　　　word-break: break-all;
    }

    .test2{
        position: relative;
        line-height: 20px;
        max-height: 40px;    /*max-height/height设置为line-height的整数倍,防止文字显示一半*/
        overflow: hidden;
    }

    .test2::after{
        content: "...";
        position: absolute;
        right: 0;
        bottom: 0;
        padding-left: 20px;
        background: linear-gradient(to right,transparent,#fff 55%);
    }
    .test3{
        /*用JavaScript实现*/
    }
    </style>
    <script>
    window.onload=function(){
        var oTxt=document.getElementById("txt");
        function sub(num){
            oTxt.innerHTML=oTxt.innerHTML.substring(0,num);
        }
        sub(60);
    };
    </script>
</head>
<body>
    <p class="test1">百度百科是百度公司推出的一部内容开放、自由的网络百科全书平台，其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2014年11月收录词条数量已达1000万个。
百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。</p>
    <p class="test2">百度百科是百度公司推出的一部内容开放、自由的网络百科全书平台，其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2014年11月收录词条数量已达1000万个。
百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。</p>
    <p class="test3"><span id="txt">百度百科是百度公司推出的一部内容开放、自由的网络百科全书平台，其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2014年11月收录词条数量已达1000万个。
百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。</span><span>...</span></p>
</body>    
</html>
posted @ 2015-11-09 16:43  DuangDang  阅读(2092)  评论(0)  编辑  收藏  举报