多行内容溢出显示省略号

发布时间:2017-04-25

多行内容溢出显示省略号的代码:

line-height: 25px;
height: 50px;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
word-break: break-all;
display: -webkit-box;

演示代码如下:

<!DOCTYPE html>
<html>
<head>
<title>内容溢出</title>
<style>
    body{font-family:'微软雅黑';}
    ul,li{list-style:none;}
    ul{margin:0;padding:5px 10px;width:397px;background:#272822;margin-bottom:20px;}
    ul li{font-size:16px;line-height:25px;padding:5px;border-bottom:1px dashed #ddd;}
    ul li a{color:#fff;text-decoration:none;}
    h3{font-size:18px;color:#fff;font-weight:normal;margin:10px 0;}
    h3 span{color:#f92672;}
    p{font-size: 16px;color: #fff;line-height: 25px;margin:10px 0;overflow: hidden;-webkit-box-orient: vertical;word-break: break-all;display: -webkit-box;}
    .line-2{height: 50px;-webkit-line-clamp: 2;}
    .line-3{height: 75px;-webkit-line-clamp: 3;}
    .line-4{height: 100px;-webkit-line-clamp: 4;}
</style>
</head>
<body>
    <ul class="cate-1">
        <li>
            <h3>2行:<span>height: 50px;-webkit-line-clamp: 2;</span></h3>
            <p class="line-2">
                北京平东信息技术有限公司是一家专门从事网站建设、互联网技术应用与开发,为企业全面打造电子商务平台的高端供应商,是为中小型企业把办公软件管理系统搭建在B/S结构中最佳的合作伙伴。同 时包括企业邮局、域名注册、虚拟主机等方面的服务
            </p>
        </li>
        <li>
            <h3>3行:<span>height: 75px;-webkit-line-clamp: 3;</span></h3>
            <p class="line-3">
                北京平东信息技术有限公司是一家专门从事网站建设、互联网技术应用与开发,为企业全面打造电子商务平台的高端供应商,是为中小型企业把办公软件管理系统搭建在B/S结构中最佳的合作伙伴。同 时包括企业邮局、域名注册、虚拟主机等方面的服务
            </p>
        </li>
        <li style="border:0;">
            <h3>4行:<span>height: 100px;-webkit-line-clamp: 4;</span></h3>
            <p class="line-4">
                北京平东信息技术有限公司是一家专门从事网站建设、互联网技术应用与开发,为企业全面打造电子商务平台的高端供应商,是为中小型企业把办公软件管理系统搭建在B/S结构中最佳的合作伙伴。同 时包括企业邮局、域名注册、虚拟主机等方面的服务
            </p>
        </li>
    </ul>
</body>
</html>

效果图如下:

单行溢出显示省略号,请查看单行溢出显示省略号