我们都知道，当我们遇到若文本溢出并显示省略号的需求时，只需要在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
完美。
