CSS——文字溢出省略成点点点

一、单行文字

<div class="text">
	我是单行文字我是单行文字我是单行文字我是单行文字我是单行文字我是单行文字我是单行文字我是单行文字
</div>

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

二、多行文字

<div class="text">
	我是多行文字我是多行文字我是多行文字
	我是多行文字我是多行文字我是多行文字
	我是多行文字我是多行文字我是多行文字
	我是多行文字我是多行文字我是多行文字
	我是多行文字我是多行文字我是多行文字
	我是多行文字我是多行文字我是多行文字
</div>

.text{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;  /*行数*/
	-webkit-box-orient: vertical;
}

注意：多行文字中不能在 p标签和div里，如下示例中不会出现点点点：

<div class="text">
	<p>我是多行文字我是多行文字我是多行文字</p>
	<p>我是多行文字我是多行文字我是多行文字</p>
	<p>我是多行文字我是多行文字我是多行文字</p>
	<div>我是多行文字我是多行文字我是多行文字</div>
	<div>我是多行文字我是多行文字我是多行文字</div>
	<div>我是多行文字我是多行文字我是多行文字</div>
</div>