css 实现div内显示两行或三行,超出部分用省略号显示

css 实现div内显示两行或三行,超出部分用省略号显示一 div 内显示一行 超出部分用省略号显示 white space nowrap overflow hidden text overflow ellipsis 二 div 内显示两行或三行 超出部分用省略号显示 overflow hidden text overflow ellipsis

大家好,我是讯享网,很高兴认识大家。

一、div内显示一行,超出部分用省略号显示

 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

讯享网

二、div内显示两行或三行,超出部分用省略号显示

讯享网 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;(行数) -webkit-box-orient: vertical;

概述


讯享网

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:

display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。 

兼容性

这里写图片描述

小讯
上一篇 2025-03-17 21:05
下一篇 2025-01-25 15:12

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/75234.html