css设置文字超出省略号_descriptions控制超出省略

单行文本设置溢出省略号

{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
1
2
3
4
5

多行文本设置溢出省略号
方法一：

{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	overflow:hidden;
}
1
2
3
4
5
6

因为多行文本设置使用了webkit的css扩展属性，该方法只适用于webkit浏览器和移动端

1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。需要和其他的webkit属性结合才能生效
2. display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示
3. -webkit-box-orient 必须结合的属性，设置或检索伸缩盒的子元素的排列方式

方法二：

	p {
		position:relative;
		line-height:20px;
		max-height:40px;//height设置成line-height的整数倍，防止超出的文字漏出
		overflow:hidden;
	}
	p:after {
		content:"...";
		position:absolute;
		bottom:0;
		right:0;
		padding-left:40px;
		background:linear-gradient(to right,transparent,#fff 55%)//添加渐变背景避免文字只显示一半
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注释：
text-overflow
确定如何向用户展示未显示的溢出内容，可以显示为一个省略号…或者一个自定义的字符串。对应的值如下

1. clip //在内容区域的极限处截断文本，为了防止在字符的中间发生截断，需要使用空字符串作为值。此为默认值
2. ellipasis //用一个省略号来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小省略号也会被截断
3. <string> //用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本，如果空间太小字符串也会被截断

white-space
white-space用来设置如何处理元素中的空白
值如下：

1. normal 连续的空白符会被合并，换行符会被当做空白符来处理。换行在填充时【行框盒子（line boxes）】是必要的
2. nowrap 和normal一样，连续的空白符会被合并。但文本内的换行无效
3. pre 连续的空白符会被保留。在遇到换行符或者<br>才会换行
4. pre-warp 连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充【行框盒子（line-boxes）】时才会换行
5. pre-line 连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充【行框盒子（line-boxes）】时会换行
6. break-spaces 与pre-wrap的行为相同，除了：
   • 任何保留的空白序列总会占用空间，包括在行尾
   • 每个保留的空格字符后都存在换行机会，包括空格字符之间
   • 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

white-space值行为