单行文本显示省略号和多行文本显示省略号

在工作中会遇到一些前端确实可以解决但却不经常遇到的问题。比如说让文本显示出省略号，这个问题其实不麻烦，但在实际项目中用到的次数很少，所以难免大家做的时候没有头绪，所以我在此统一写一下代码(如有不妥或有新的方法，欢迎讨论)。

 .box{
            width: 100px;
            height: 100px;
            background-color: pink;
            white-space: nowrap;/*默认normal自动换行，nowrap是强制不换行*/
            overflow: hidden;/*溢出部分隐藏*/
            text-overflow: ellipsis;/*溢出部分用省略号显示，ellipsis就是省略号的意思*/
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            overflow: hidden;/*溢出隐藏*/
            text-overflow: ellipsis;/*溢出的地方用省略号表示*/
            display: -webkit-box;/*转成弹性盒子*/
            -webkit-line-clamp: 2;/*省略号出现的行数*/
            -webkit-box-orient: vertical;/*让盒子内所有的元素垂直*/
        }

 

box这个盒子做的是单行文本的显示效果，box1这个盒子做的是多行文本的显示效果。特别要注意的是多行文本省略号显示要考虑兼容性。只在webkit浏览器下才有效。

文本省略号的显示交给后台人员做其实会很方便。