Css之去除滚动条|隐藏多余内容显示点点...

去除滚动条

overflow-x: hidden;
overflow-y: overlay;

隐藏多余内容显示点点

如下内容过多在最后一行后显示点点....

解决方法

根据不同需求可以选择合适的方法，在此提供三种。

1. css单行文本溢出显示省略号

.test1{
            overflow: hidden;/*内容超出后隐藏*/
            white-space: nowrap;/*设置内容不换行*/
            text-overflow: ellipsis;/*设置超出内容为省略号*/
        } 

2.css多行文本溢出显示省略号

  /*多行文本溢出显示省略号(PC端兼容一些主流浏览器,如果网站对兼容性要求比较高的话,建议截取字符串)*/
        .test2{
            overflow:hidden;
            text-overflow:ellipsis; 
            display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
            -webkit-box-orient: vertical; /* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
            -webkit-line-clamp: 3; /*设置显示几行  需要组合上面两个属性 */
        }

3.jQuery截取字符 显示省略号

<!-- 截取字符串显示省略号 -->
    <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>