css单行超出隐藏，多行超出隐藏，超出部分省略号

六月初六月初 HTML 2018-12-24 17:56:58

CSS控制文字,超出部分显示省略号！

描述：在产品介绍或者新闻简介中，我们经常需要控制简介显示的行数，超出部分就用省略号代替。但在实际中，我们不可能说每次的简介刚好是多少个字，这就需要我们利用js或者css来实现整体的美化了。

本篇内容介绍如何使用css控制超出部分省略号代替。

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--当行超出隐藏-->
		<p style="width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">博客笔记，是一个记录自己生活点滴的技术站点。标准的90后，学着前端，做着后台，会点PS。慢慢的成了一个都会一点什么又都不会的小站长，不过这些都不是事。生活总是会一样学一样，学一样了解一样！我们共同进步！</p>
		<!--多行超出隐藏-->
		<div id="" style="width: 200px;">
			<p style="display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;">博客笔记，是一个记录自己生活点滴的技术站点。标准的90后，学着前端，做着后台，会点PS。慢慢的成了一个都会一点什么又都不会的小站长，不过这些都不是事。生活总是会一样学一样，学一样了解一样！我们共同进步！</p>
		</div>
	</body>
</html>

主要实现代码：

单行超出显示省略号：

overflow: hidden;
white-space: nowrap;//禁止换行
text-overflow: ellipsis;//当对象内文本溢出时显示省略标记

多行超出显示省略号：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;//控制行数   当前为3行
overflow: hidden;

注：这里的属性为css3属性所以如果你要兼容低版本的IE还是需要用js！

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！