css设置文字超出省略号

单行文本设置溢出省略号

{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

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

{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	overflow:hidden;
}

因为多行文本设置使用了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%)//添加渐变背景避免文字只显示一半
	}

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

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

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

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

white-space值行为
css设置文字超出省略号_第1张图片

你可能感兴趣的:(css设置文字超出省略号)