CSS文本截断显示省略号

944 阅读1分钟

单行文本

<div class="singleline">如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来实现</div>
.singleline{
    width: 200px;
    height: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行文本

方案一:

<div class="multiline">在webkit浏览器中可以使用-webkit-line-clamp、-webkit-box-orient配合display: -webkit-box使用。-webkit-line-clamp表示限制显示的行数;-webkit-box-orient表示元素是水平还是垂直布局其内容。</div>
.multiline{
    width: 200px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

方案二:

使用float

<div class="multiline-float">
	<div class="text">
		随着众多科技企业的成功,中国的信息技术及下一个阶段的智能技术已经处于高速增长。也就是说,除了繁荣的互联网所带来的开发者数量需求,随着技术的创新,开发者质量的需求也越来越大。甚至,会有很多的新技术是由中国开发者创造并影响世界的。然而,中国开发者现在并没有一个地方去沉淀、生产、分享、学习技术内容,而这就是我做掘金的社区的原因。
	</div>
	<div class="holder"></div>
	<div class="more-icon">...</div>
</div>
.multiline-float{
	width: 100%;
	height: 4.5em;
	font-size: 14px;
	line-height: 1.5em;
	overflow: hidden;
}
.multiline-float .text{
	width: 100%;
	float: right;
	margin-left: -3em;
}
.multiline-float .holder{
	width: 3em;
	height: 100%;
	float: right;
}
.multiline-float .more-icon{
	width: 3em;
	height: 1.5em;
	float: right;
	position: relative;
	left: 100%;
	transform: translate(-100%, -100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%);
	text-align: right;
}