首页 前端知识 css 超过一行/多行显示省略号... - 附示例

css 超过一行/多行显示省略号... - 附示例

2024-09-01 23:09:47 前端知识 前端哥 85 884 我要收藏

效果

1、超过一行

2、超过多行 - 以两行为例

二、示例代码

1、超过一行

margin: 20px;
width: 50px;
border: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2、超过多行 - 以两行为例

margin: 20px;
width: 50px;
border: 1px solid red;
display: -webkit-box;	
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
line-clamp: 2;
-webkit-line-clamp: 2; // 如果是3行改为3,以此类推
-webkit-box-orient: vertical;
overflow: hidden;

 欢迎扫描下方二维码关注VX公众号

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17467.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!