CSS实现单行、多行文本溢出显示省略号的方法

来源：懂视网责编：小采时间：2020-11-27 18:50:05

CSS实现单行、多行文本溢出显示省略号的方法

CSS实现单行、多行文本溢出显示省略号的方法:代码实现：//单行.single-line{ width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}<p class="single-line"></p>//多行.multiple-line{ width:20

推荐度：

点击下载本文 文档为doc格式

导读CSS实现单行、多行文本溢出显示省略号的方法:代码实现：//单行.single-line{ width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}<p class="single-line"></p>//多行.multiple-line{ width:20

代码实现：

//单行
.single-line{
 width:200px;
 overflow:hidden;
 white-space:nowrap; 
 text-overflow:ellipsis;
}
<p class="single-line"></p>
//多行
.multiple-line{ 
 width:200px; 
 display:-webkit-box; 
 -webkit-box-orient:vertical; 
 -webkit-line-clamp:2; 
 overflow:hidden; 
}

注意：由于使用的是WebKit的CSS扩展属性，所以该方法只适用于WebKit浏览器及移动端；

CSS实现单行、多行文本溢出显示省略号的方法

推荐度：

点击下载本文 文档为doc格式

标签：方法实现多行

热门焦点

CSS实现单行、多行文本溢出显示省略号的方法

CSS实现单行、多行文本溢出显示省略号的方法

CSS实现单行、多行文本溢出显示省略号的方法

最新推荐

猜你喜欢

热门推荐