实现单行和多行文本溢出隐藏变为省略号

最近做项目用到了这个知识点，所以纪录一下

实现单行文本溢出方法

也就三行代码

overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;

overflow: hidden 溢出隐藏
white-space属性是用来设置如何处理元素中的 空白，设置了nowrap之后文本不会换行。
我之前写过一篇关于 标签 pre和css的white-space属性 的博客。标签 pre和css的white-space属性

text-overflow 用来控制超长溢出的文字内容的显示方式，超出的文字可以是直接截断、用省略号表示，或用自定义的字符替代。（在你设置自定义字符串的时候，如果空间太小到连省略号都容纳不下，那么这个字符串也会被截断）

效果如下

记得不要用行级元素

实现多行文本溢出方法

<div>
        我想吃麻辣烫！我想吃麻辣烫！ 
        我想吃麻辣烫！我想吃麻辣烫！ 
        我想吃麻辣烫！我想吃麻辣烫！ 
        我想吃麻辣烫！我想吃麻辣烫！
    div>

div {
     
            width: 80px;
            height: 80px;
            border: 1px solid red;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
        }

效果图如下：

这种方法使用了webkit的拓展属性，所以适用于webkit浏览器及移动端
display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 后面设置的数字就是你准备在多少行显示省略号
-webkit-box-orient用来设置一个元素是水平还是垂直布局其内容。
-webkit-box-orient: vertical; 盒子垂直布局其内容。
-webkit-box-orient是不标准的，请尽量不要在生产环境中使用它

（如果这篇文章有什么问题请及时联系我！）