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