单行文本溢出省略以及多行文本溢出省略css实现方式

单行文本 省略需要用到 text-overflow 属性

.one-line{
	width: 100%;
	/* 宽度固定，高度只有一行，不能换行就进行下一步省略了 */
	overflow: hidden;	/* 必须超出修剪 */
	white-space: nowrap;	/* 确保文字不换行 */
	text-overflow: ellipsis;		/* 文字超出就省略 */
}

white-space 属性是用来设置如何处理元素中的 空白，当值为 nowrap 时，和 normal 一样，连续的空白符会被合并，此时文本内的换行无效。

text-overflow 属性确定如何向用户发出未显示的溢出内容信号，当值为 ellipsis 时会用用一个省略号 ‘…’ 来表示被截断的文本从而实现省略。



需要注意的是设置了flex弹性布局希望子元素设置文本溢出隐藏，要设置子元素宽度为0，下次补代码



多行文本 省略
这个功能依赖chrome浏览器后来推出的私有属性，目前IE不支持，不过可以拿来用用

.muti-line{
	width: 100%;
	display: -webkit-box;	/* 必须设置 display 类型为 -webkit-box */
	-webkit-line-clamp: 2;	/* 设置第几行省略 */
	-webkit-box-orient: vertical;	/* 设置其元素垂直布局其内容 */	
	
	overflow: hidden;	/* 保证留省略号时仍要 */
}

display 属性为显示CSS属性设置是否将元素视为块或内联元素以及用于其子元素的布局，在这里值设为 -webkit-box

-webkit-line-clamp 用来将块内容限定在指定的行数内，必须和 display 设置为 -webkit-box 或者 -webkit-inline-box 以及 -webkit-box-orient 设置为 vertical 一起使用。另外，最好将 overflow 设置为 hidden，否则有可能会在指定的行数之后显示省略号的同时并不会去剪切多余的内容。

-webkit-box-orient 属性用于设置一个元素是水平还是垂直布局其内容，这里设置值为 vertical。

ps：实际使用过程中，如果在锚元素中使用，可能会在中间截去多余的内容。