关于table中的文本溢出显示省略号失效与多行显示问题

我们都知道，当我们遇到若文本溢出并显示省略号的需求时，只需要在css上添加下面的代码即可，但是，如果是在表格中，我们会惊奇的发现，这些代码并没有起作用。

.ell {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

不仅如此，连我们设置的宽度也没有起作用，单元格全靠内容撑开，类似下面这样。

image.png

那么如何解决这个问题呢，实际上很简单，只需要在table上添加一行。

table-layout: fixed;

那么我们再来看一下效果：

image.png

可以看到已经能够正常显示了。
那如果我们想要让他显示两行，然后再溢出显示省略号呢？可以这样写。

.multi {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; // 显示的行数
    overflow:hidden;
}

image.png

这样就实现了，但是需要注意的是，我现在多行显示的不是一个完整的字符，中间有空格间隔，但是如果是像上面那样一长串的连续字符呢？就会变成这样，多行显示又失效了。

image.png

这时候只需要添加一个属性就好了。

word-break: break-all;

word-break: normal | break-all | keep-all;
normal: 使用浏览器默认的换行规则
break-all: 允许在单词内换行
keep-all: 只能在半角空格或连字符处换行

然后我们再来看一下效果

image.png

完美。