多行文本溢出显示省略号(...)的方法
-webkit-line-clamp
-o-ellipsis-lastline
jQuery
除了各个浏览器私有的属性,有没有跨浏览器的解决方法呢?当然是通过js实现啦!(通过从后向前逐个删除末尾字符,直至元素的高度小于父元素高度)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(function(){ $(".figcaption").each(function(){ var divH = $(this).height(); var $p = $("p",$(this)).eq(0); while($p.outerHeight() > divH){ $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/,"...")) } }); }) </script> <style type="text/css"> .figcaption{ width: 300px; height: 50px; border: 1px solid #000; overflow: hidden; } .figcaption p{ margin: 0; padding: 0; border: 1px solid #f00; } </style> </head> <body > <div class="figcaption"> <p>dfsdfsdfsdfsdfsdfsdfasdfadddddsfsaddddd天ddddddd天天天天天天天dfsddfsd天天天天大放送天天ddddd天天ddd天dddd天天弟弟的dddddd天天ddd天ddd天dd地地天天天天</p> </div> </body> </html>