css设置文字不换行，超出容器部分省略

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

首先设置overflow：hidden，超出部分隐藏。

然后设置text-overflow：ellipsis，以省略号代替被省略的文字

text-overflow还有另外两个值。

一共三个值如下：

ellipsis	以省略号代替被省略的文字
string	以某个字符串代替被省略的文字
clip	裁剪文字

最后是设置white-space：nowrap 合并空格 并且不换行

当然white-space 空格处理 也有很多属性

white-space

	空格处理	换行
normal	合并多个相邻空格为一个空格	根据容器大小换行
nowrap	合并多个相邻空格为一个空格	不换行
pre	保留空格	不换行
pre-wrap	保留空格	根据容器大小换行
pre-line	合并多个相邻空格为一个空格	不换行

最后我也做了小小的实验， 貌似overflow属性不写，text-overflow的值clip和ellipsis的效果都是一样的，都是超出部分被裁掉了。