前端的文本溢出隐藏解决方案

一、css方法

1.当希望文本只保留一行时
        
            white-space:nowrap;/*强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。*/
            overflow: hidden;/*超出部分隐藏*/
            text-overflow: ellipsis;/*隐藏部分以省略号代替*/
2.当文本需要保留多行时
        a.webkit内核浏览器(谷歌,Safarim,QQ浏览器)情况下
            overflow: hidden;/*超出部分隐藏*/
            text-overflow:ellipsis;/*隐藏部分以省略号代替*/
            display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
            -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性*/
            -webkit-box-orient: vertical;/*子元素垂直排列*/
        b.其他浏览器的兼容方案
                li{
                    position:relative;
                    line-height:20px;
                    max-height:40px;
                    overflow:hidden;
                    width: 200px;
                    border: 1px solid red;