css实现文本超出部分...效果

第一种方法：

先设定好文本的宽度，使用white-space设置不换行，超出部分隐藏，使用text-overflo属性ellipsis展示省略号

#qw{
	width: 100px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

使用第一种方法快速简单，但是有一定的局限性：只能单行文本实现…效果
如果要实现多行文本…效果就需要使用到伪类如下：

第二种方法：

#as{
	position: relative;
	width: 100px;
	font-size: 12px;
	line-height: 12px;
	max-height: 36px;
	overflow: hidden;
}

设置好行高等属性后，使用after伪类绝对定位到右下加content设置文本…
然后为美观设置背景为横向的渐变过程linear-gradient涉及到兼容性问题这里以webkit为例

#as::after{
	content: '...';
	position: absolute;
	right: 4px;
	bottom: 0;
	background: -webkit-linear-gradient(left, transparent, #fff 55%);
	padding-left: 12px;
}

以下为效果图：