首页 > 代码库 > 多行文本省略号

多行文本省略号

2024-07-07 02:23:00   230人阅读

代码奉上：

 

 

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

 

 

 


联系
我们