单行文字、多行文字溢出显示省略号

鳄鱼君

发表文章数:642

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS » 单行文字、多行文字溢出显示省略号

单行文字溢出显示省略号,必须满足三个条件:

  1. 强制一行内显示文本:white-space:nowrap;
  2. 超出的部分隐藏:overflow:hidden;
  3. 文字用省略号替代超出的部分:text-overflow: ellipsis;

多行文字溢出显示省略号:
多行文本溢出显示省略号,有较大的兼容性,适合webkit浏览器或移动端(移动端大部分都是webkit内核):

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;//弹性伸缩盒子模型显示
-webkit-line-clamp:2;// 限制在一个块元素显示的文本的行数
-webkit-box-orient:vertical;

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《单行文字、多行文字溢出显示省略号》 发布于2020-08-15

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

5 + 3 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册