首页 > Web开发 > 详细

css文本溢出解决方案

时间:2019-11-08 00:38:06      阅读:111      评论:0      收藏:0      [点我收藏+]

1.普通单行截断省略

overflow:hidden; 文字长度超出限定宽度,则隐藏超出的内容)
text-overflow:ellipsis;(设置文字在一行显示,不能换行)
white-space:no-wrap;(规定当文本溢出时,显示省略符号来代表被修剪的文本)

这个方法的优点:

无兼容问题
响应式截断
文本溢出范围才显示省略号,否则不显示省略号
省略号位置显示刚好
缺点:
只支持单行文本截断

2.多行截断省略

-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行)
display: -webkit-box;
-webkit-box-orient: vertica;
overflow: hidden;
text-overflow: ellipsis;

这个方法的兼容性一般




出处链接:https://www.jianshu.com/p/5a0943faf7aa
 
溢出插件:
  • clamp.js
  • jQuery.dotdotdot
 

css文本溢出解决方案

原文:https://www.cnblogs.com/XingXiaoMeng/p/11817201.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!