.tab-overflow {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

word-break属性:

word-break: normal 
word-break: break-all 
word-break: keep-all
 
/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

normal:如果是中文则到边界处的汉字换行,如果是英文整个词换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.

break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
它们的区别就在于：
1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

white-space属性

white-space:normal;
white-space:pre;
white-space:nowrap;
white-space:pre-wrap;
white-space:pre-line;
white-space:inherit;

normal：忽略多余的空白，元素内如果有多个空格在一起或换行符（回车键），浏览器会把其看作一个空格来处理，不会影响自动换行（就是元素内容过长，在一行上显示不完，会从下一行开始）；

pre：保留空白或换行符（回车键）。输入几个空格，浏览器显示的时候就是几个空格，其实就是原样输出，如果有换行符，换行符后的内容会从下一行开始。其行为方式和html中的</pre>标签类似。会影响自动换行（就是元素内容过长，不会从下一行开始，会冲出元素的边界显示）。

nowrap：1、元素内文本如果有多个空格在一起或换行符，浏览器只会显示一个空格；2、元素文本内容不会自动换行，只有遇到</br>标签才会换行；

pre-wrap：1、和nowrap相反，元素内的空格不管有多少个都会原样显示，如果有换行符，换行符后的内容会从下一行开始；2、会自动换行，就是元素内容在一行中显示不完会从下一行开始；

 pre-line：合并空白符序列，保留换行符。就是多个空格会被浏览器看作一个空格来处理，如果有换行符（回车键），换行符后的内容会从下一行开始，不会影响自动换行。

text-overflow属性

text-overflow:clip;
text-overflow:ellipsis;
text-overflow:string;

clip:修剪文本;

ellipsis:显示省略号来代替修剪的文本;

string:给定指定的字符串来代替修剪的文本;