多行内容溢出显示省略号的代码:
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>效果图如下:

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