怎么用css实现多行文本省略?

Posted 代码123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么用css实现多行文本省略?相关的知识,希望对你有一定的参考价值。

效果图

多行省略

解决方案

<div class="demo">
  CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号
</div>
.demo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp3;
  overflow: hidden;
  width200px;
  border1px solid #ccc;
}

1.-webkit-box-orient: vertical:指定子元素按垂直方向排列。

2.-webkit-line-clamp: 3:可以限制块元素中文本的显示行数。这里显示3行。

3.适用范围:该方法适用于Webkit浏览器及移动端。

示例代码下载

可以复制以上代码运行查看使用效果,也可以到GitHub: https://github.com/Jackyyans/code123下载,更多示例将会持续更新,欢迎关注。

以上是关于怎么用css实现多行文本省略?的主要内容,如果未能解决你的问题,请参考以下文章

纯css实现文本内容单行/多行溢出显示省略号

CSS 一段文本怎么设置超过省略号显示

CSS+div 控制多行文本的显示,多余的以省略号显示

css实现文本溢出省略(单行/多行)

css实现文本溢出省略(单行/多行)

CSS实现单行多行文本溢出显示省略号(…)