当前位置:网站首页 > 技术教程 > 正文

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

作者:小伙子日期:2022-07-28浏览:分类:技术教程

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

以下是一个css实现的两行及三行文字省略显示效果实现,供大家参考:

//容器最大显示两行文字 超出部分省略号展示.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;}//以此类推 可以实现四行、五行。。。省略效果
免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯