CSS 处理文字超长

单行省略

.text_overflow{
    width:66em; 			// 最长可显长度
    white-space:nowrap; 	        // 文本不会换行, 除非遇到 <br/>
    text-overflow:ellipsis;	        // 显示省略符号来代表被修剪的文本
    overflow:hidden;		        // 溢出隐藏
}

多行省略

.text_overflow{                         // 兼容性较好
    width: 66em;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

参考资料：

white-space:

值	描述
normal	默认。空白会被浏览器忽略
pre	空白会被浏览器保留。其行为方式类似 HTML 中的<pre>标签
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br/>标签为止
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符
inherit	规定应该从父元素继承 white-space 属性的值

text-overflow:

值	描述
clip	修剪文本
ellipsis	显示省略符号来代表被修剪的文本
string	使用给定的字符串来代表被修剪的文本