html+css实现容器显示两行文本超出部分以省略号显示

其它教程评论385阅读模式

前言:

Bootstrap 给予响应式、移动设备优先的流式栅格系统提供了十分丰富的样式类,基于这些了可以做出很多好看的效果,虽让提供了常用基本样式类,但有一些比较特殊的需求 比如bootstrap 提供了 text-truncate 样式类,使用这个类可以轻松实现单行文字溢出容器时自动隐藏并在结尾处显示省略号效果,但是如果希望在容器内显示两行或三行文字 超出部分省略号显示这类定制性需求,就没有对应的类需要自己去实现。

html+css实现容器显示两行文本超出部分以省略号显示文章源自百科情报站-https://www.bkqbz.com/2380.html

以下是一个css实现的两行及三行文字省略显示效果实现 供大家参考这个代码:文章源自百科情报站-https://www.bkqbz.com/2380.html

//容器最大显示两行文字 超出部分省略号展示
.text-truncate-2 {
  -webkit-line-clamp: 2;//这里就是最大显示两行
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
//容器最大显示三行文字 超出部分省略号展示
.text-truncate-3{
  -webkit-line-clamp: 3;//这里就是最大显示三行
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
//以此类推 可以实现四行、五行。。。省略效果
文章源自百科情报站-https://www.bkqbz.com/2380.html文章源自百科情报站-https://www.bkqbz.com/2380.html
文章声明:
1、文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,如发现有问题,请及时联系我们进行处理。
3、如果你有比较好的文章需要发布,可以联系站长和小编,或者自行点击 投稿。
4、若文章中有侵权或不适当内容,请告知我们,本站会第一时间进行处理 免责申明。
admin
  • 我们不提供免费技术支持,本文属于用户投稿。
  • 转载请务必保留本文链接:https://www.bkqbz.com/2380.html
评论  0  访客  0

发表评论