CSS 文本溢出处理（单行和多行）

1 单行文本

html：

<span>单行文本溢出处理span>

css：

span{

	display: inline-block;

	width: 100px;

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;

}


span{
	
	border: 1px solid black;
	
}

效果图：

注意：

• 要配合width属性使用，或max-width
• span是inline类型的，不能设置宽高，要先display: inline-block;
• white-space属性是用来定义元素内的空白该如何处理。
  white-space属性值
  • normal（默认）：忽略多余的空白，只保留一个空白；
  • pre：保留空白（行为方式类似于html中的pre标签）；
  • nowrap：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。
  • pre-wrap：保留空白符序列，正常地进行换行；
  • pre-line：合并空白符序列，保留换行符；
  • inherit：从父元素继承white-space属性的值。

2 多行文本溢出

html：

<span>多行文本溢出处理，多行文本溢出处理，多行文本溢出处理，多行文本溢出处理，多行文本溢出处理，span>

css：

span{

	width: 100px;

	display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    overflow: hidden;

}


span{

	border: 1px solid black;
	
}

效果：

webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。

常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
webkit-box-orient: 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。