/* 一行显示*/
-webkit-line-clamp: 1
/* 将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box
/*子元素的排列方式 */
-webkit-box-orient: vertical
text-overflow:ellipsis
overflow: hidden
word-break:break-all
}
ch应该是一个鲜为人知的计算单位。
ch是一个相对于数字0的大小。
1ch 就是数字 0 的宽度。
比如定义一个3ch的宽度，那么久只能装下3个0。
重复一次：1ch 等于一个 0 的 宽度！宽度！宽度！
注意，是0的宽度，和0的高度无关。
比如
可以看到，是一个正方形，因为ch只等于0的宽度。
ch还有另一个规则：
ch 是一个相对单位，所谓相对，意思是 ch 会根据当前容器的 ****font-size**** 变化而变化。
如果字体不是等宽字体，这时的ch看起来就不止是一个英文字母的宽度了。
比如
可以看到，16个小写L，并没有超出8ch。
同时，如果容器中的内容是中英文结合的话，用ch做长度单也不是那么好使。
上面用到的几个CSS属性，是用来控制如果内容超出容器，就用省略号显示超出的部分。 【CSS】省略号
ch一般很少用得上，因为使用规则可能稍微有点复杂，而且通常需要 js 配合使用。
一般都会用em来代替ch~
超出指定文本以省略号显示效果，用css的"text-overflow:ellipsis"实现
text-overflow:ellipsis 溢出的部分用 省略号 表示。
<!DOCTYPE html><html>
<head>
<style>
div.test
{
white-space:nowrap
width:123px
overflow:hidden
border:1px solid #000000
text-overflow:ellipsis
}
</style>
</head>
<body>
<p>这个 div 使用 "text-overflow:ellipsis" ：</p>
<div class="test">
This is some long text that will not fit in the box
</div>
</body>
</html>
在div块中要设置宽度，"overflow:hidden"要跟"text-overflow:ellipsis"使用才行
