css实现文本超出隐藏

css实现文本超过隐藏，并且以...来显示，这种应该大家做项目的很多时候都会遇到。

单行文字超过隐藏：

测试代码如下：

<div id="mydiv">
	<p class="text-flow">css实现文本超过隐藏，并且以...来显示，这种应该大家做项目的很多时候都会遇到。</p>			
</div>

css代码：

#mydiv{
<span style="white-space:pre">	</span>width:100px;		
}
.text-flow{
	overflow:hidden;/*超过隐藏*/
	text-overflow:ellipsis;/*显示省略符号来代表被修剪的文本。*/
	white-space:nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
}

效果图如下：

多行文字超过隐藏：(在指定的行数情况下)

以上面代码为例，css修改如下即可实现

.more-flow{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数*/
-webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式 */
}

效果图如下：