width：value； overflow:hidden; white-space：nowrap; text-overflow：ellipsis;
1. width：value；
就是设置宽度的具体值( 必需 )
2.overflow:hidden; // 多余隐藏
overflow 可选的值 :
visible : 浏览器的默认值 , 多余的内容不会被修剪 , 会呈现在元素框之外
hidden : 多余内容隐藏
scroll : 多余的部分显示滚动条
auto : 自动 , 如果内容宽度大余容器宽度 , 会显示滚动条 , 否则不会显示滚动条
inherit : 继承父亲
3 . white-space：nowrap; // 文本不折行
normal : 默认值 , 空白会被浏览器忽略 , 即在代码里的多个空格会合并为一个
pre : 空白保留 , 编辑器里几个空格都会呈现在页面上
nowrap : 文本不换行 , 文本会在同一行上显示 , 直到遇见<br/>标签
pre-wrap : 保留空白 , 遇到元素的边界会正常进行换行
pre-line:合并空白符序列，但是保留换行符；
inherit：规定应该从父元素继承White-space属性的值
4 . text-overflow : ellipsis // 多余的部分显示省略号
clip : 不显示省略号
ellipsis : 显示省略号 (只有在文本溢出且满足上面三个条件才会显示省略号)
多行文本显示省略号 :
200px; //宽度 display: -webkit-box; // 变成弹性盒模型 -webkit-box-orient:vertical; // 上下排列子元素 -webkit-line-clamp:2; // 两行文本 overflow:hidden; //多余隐藏
但是注意他的兼容性不好 , 且不能设置大于文本的高度 .
如果设置高度 , 且大于文本 , 会出现这种情况 :
