多行文本省略号

代码奉上：

 

 

<!DOCTYPE HTML>
<html>
<head>
    <style>
        html, body, p { margin: 0; padding: 0; font-family: sans-serif;}

        .ellipsis {
            height: 200px;
            line-height: 25px;
            margin: 20px;
            border: 5px solid #AAA; 
            overflow:hidden;
        }

        .ellipsis:before {
            content:"";
            float: left;
            width: 5px; height: 200px; }

        .ellipsis > p {
            float: right;
            width: 100%;
            margin-left: -5px; }        

        .ellipsis:after {
            content: "\02026";  
            float: right; position: relative;top:-23px;left:100%;margin-left:-2em;width:2em;padding:0 1px 0 3px;background:#FFF;}
    </style>
</head>
<body>
    <div class="ellipsis">
        <p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p>    
    </div>
</body>
</html>

 

 

 

posted @ 2014-06-04 13:08  barbabravo  阅读(299)  评论(0)  编辑  收藏  举报