解决CSS多行文本溢出隐藏纯字母失效

首先来看看网上常见的单行文本溢出隐藏和多行文本溢出隐藏

单行文本溢出隐藏显示省略号

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

代码

总结

欢迎大家搜索微信公众号：前端回忆录
我会在那里总结一些工作中遇到的坑和一些有意思的面试题。
避免遇坑，共同进步