分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

html div内第二行文字显示不下的时候才用省略号代替 css实现

发布时间:2023-09-06 01:59责任编辑:彭小芳关键词:div

有时候文字太多,但为了美观想要在第二行的时候才显示省略号,而不是第一行超出马上就出现省略号

下面是css代码:

overflow:hidden;
text-overflow: ellipsis;//显示省略号
display:-webkit-box;
-webkit-line-clamp:2;//块元素显示的文本行数
-webkit-box-orient:vertical;

截图:

定义在div上就可以了

上效果图

这样文字不会到第三行

html div内第二行文字显示不下的时候才用省略号代替 css实现

原文地址:https://www.cnblogs.com/fqfzs/p/9179441.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved