欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

超出文本省略号显示(单行/多行)

程序员文章站 2022-03-02 15:22:31
...

一:使用CSS属性

单行:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

 多行:

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;/*控制行数*/
-webkit-box-orient: vertical;

二:用jq方法

多行:

$(function() {
       $("p").each(function() {
           var maxwidth = 200;
           if ($(this).text().length > maxwidth) {
               $(this).text($(this).text().substring(0, maxwidth));
               $(this).html($(this).html() + '...');
           }
       });
   })

 

相关标签: css jquery