用css或jQuery实现单行/多行内容,超出显示省略号

需求有时候需要对文本限制字数，内容超出显示省略号:

这里提供了三种方法: 1. css单行文本溢出显示省略号 2.css多行文本溢出显示省略号 3.jQuery截取字符 显示省略号

先上图:

代码如下:

<style type="text/css"> 
        /*单行文本溢出显示省略号*/
        .cont{
            width:300px;
            border:1px solid #ccc; 
        }
        .ellipsis{
            overflow: hidden;/*内容超出后隐藏*/
            white-space: nowrap;/*设置内容不换行*/
            text-overflow: ellipsis;/*设置超出内容为省略号*/
        } 
        
        /*多行文本溢出显示省略号(PC端兼容一些主流浏览器,如果网站对兼容性要求比较高的话,建议截取字符串)*/
        .cont2{
            width: 220px; 
            border:1px solid #ccc; 
            overflow:hidden;
            text-overflow:ellipsis; 
            display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
            -webkit-box-orient: vertical; /* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
            -webkit-line-clamp: 3; /*设置显示几行  需要组合上面两个属性 */
        }
        
        /*截取字符串 显示省略号*/
        .cont3{
            width: 220px; 
            border:1px solid #ccc; 
        }
    </style>


<!-- 单行文本 -->
    <p class="cont ellipsis">内容超出显示省略号内容超出显示省略号内容超出显示省略号内容超出显示省略号内容超出显示省略号</p>
    
    <!-- 多行文本 -->
    <p class="cont2">
        这是一个段落。这是一个段落。这是一个段落。这是一个段落。内容超出显示省略号内容超出显示省略号内容内容超出显示省略哈哈哈
    </p>
    
    <!-- 截取字符串显示省略号 -->
    <p class="cont3">这是一个段落。这是一个段落。这是一个段落。这是一个段落。内容超出显示省略号内容超出显示省略号内容内容超出显示省略哈哈哈
    </p>
    <script type="text/javascript"> 
        var str = $('.cont3').text().substr(0,20) + '...';
        $('.cont3').text(str);
              // 循环出来的内容  截取字符串 
                $('.projectList .des').each(function () {
   　　           var u = $.trim($(this).text());
   　　           $(this).text(u.substr(0,2) + '...');
                 });
    </script>