单行|多行 文本溢出省略一次说清楚

简介

项目中有时需要将单行文本溢出隐藏，有时需要将多行文本进行隐藏，使用省略号将他们代替，那么这些都则怎么实现呢？

单行文本溢出隐藏

white-space:nowrap;//文本不换行
overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//用省略号代替隐藏的文字

多行文本溢出隐藏（汉字）

overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//用省略号代替隐藏的文字
display: -webkit-box;//显示属性为webkit-box
-webkit-box-orient: vertical;//排列方向为垂直
-webkit-line-clamp: 2;//显示的行数

以上css代码只对汉字生效，如果你使用的是英文或者是数字会发现不起作用，只需要添加下面这行代码即可

word-break: break-all;//对英文字母生效