CSS文本超出隐藏显示省略号

CSS文本超出隐藏显示省略号

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

用text-overflow:elipsis属性  并且家width来兼容部分浏览

  .tetle{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }

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

display:-webkit-box;/**对象作为伸缩盒子模型展示**/
-webkit-box-orient:vertical;/**设置或检索伸缩盒子对象的子元素的排列方式**/
-webkit-line-clamp:3;/**显示的行数**/
overflow:hidden;/**隐藏超出的内容**/

    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;