首先来看看网上常见的单行文本溢出隐藏和多行文本溢出隐藏
单行文本溢出隐藏显示省略号
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
demo
单行文本溢出隐藏
代码
多行文本溢出隐藏显示省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
demo
多行文本溢出隐藏显示省略号
代码
值得注意
正常情况下以上两种情况足够大家使用，但最近在工作中发现多行文本溢出隐藏文本内容为
纯字母时会有显示不正确的情况！
demo
多行文本溢出隐藏纯字母存在的问题
代码
解决办法
在默认情况下字母是不会自动换行的，所以在代码中加入强制换行word-break:break-all;会解决这个问题
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
word-break:break-all;
demo
解决这个小Bug
代码
总结
欢迎大家搜索微信公众号：前端回忆录
我会在那里总结一些工作中遇到的坑和一些有意思的面试题。
避免遇坑，共同进步
