首页 > 其他 > 详细

多行文本省略号

时间:2014-06-06 06:51:44      阅读:377      评论:0      收藏:0      [点我收藏+]

代码奉上:

 

 

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

多行文本省略号

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!