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;/*设置或检索伸缩盒对象的子元素的排列方式 */}

效果图如下：