码迷,mamicode.com
首页 > 其他好文 > 详细

多行文本省略号

时间:2014-06-06 06:52:01      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

代码奉上:

 

 

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

 

 

 

多行文本省略号,布布扣,bubuko.com

多行文本省略号

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/bluers/p/3767664.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!