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

最近在面试，也在完善我的博客项目：sakihomura 这次遇到了一个问题，多行文本溢出变省略号，一般情况下没啥问题，就像下图中的内容这样。 以下分别是多行文本溢出省略的css和html的代码

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

<div class="test">  sapoidkapsdkapskdpaoskdpasosapoidkapsdkapskdpaoskdpasosapoidkapsdkapskdpaoskdpasosapoidkapsdkapskdpaoskdpasosapoidkapsdkapskdpaoskdpaso
</div>

这是不设置溢出隐藏的图。

在我实际开发测试中，纯字母的内容出现了问题：

1. 不会换行
2. 不会变省略号

-webkit-line-clamp: 3; 表示换三行，但是实际上这一长串字母既没有省略也没有换行。

网上查了一下，原来是英语字母设定问题，它不会换行。 在代码中加入强制换行 word-break:break-all; 可以解决这个问题

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-break:break-all;

对了，记得不要给这个盒子设置高度，不然会变成这样。 希望大家少踩坑。