<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多行超高 溢出省略</title> <style type="text/css"> p{ 100px; height:100px; border:2px solid red; font-size:12px; } /*****css方法 适用chrome 和 oper 内核的浏览器*** .box span{ display:inline-block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; text-overflow: -o-ellipsis-lastline; } ***/ </style> </head> <body> <p class="box"> <span> 文本内容文本内容文本内容文本内容文本内容文本内容文本内容 文本内容文本内容文本内容文本内容文本内容文本内容 文本内容文本内容文本内容文本内容文本内容文本内容 文本内容文本内容文本内容文本内容文本内容文本内容 </span> </p> </body> <script type="text/javascript" src="补货页面/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $(".box").each(function(i){ var divH = $(this).height(); var $p = $("span", $(this)).eq(0); while ($p.outerHeight() > divH) { $p.text($p.text().replace(/(s)*([a-zA-Z0-9]+|W)(...)?$/, "...")); }; }); }) </script> <!----> </html>