css文本溢出解决方案
2024-09-03 09:50:20
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
最新文章
- Windows 10 部署Enterprise Solution 5.5
- iOS 视图控制器 (内容根据iOS编程编写)
- p12(PKCS12)和jks互相转换
- js选择目录
- MySQL 授权远程登录(Ubuntu 环境)
- DOM 之 SAX操作
- (三)Qt语言国际化
- 1305: [CQOI2009]dance跳舞 - BZOJ
- 自定义Operation
- [置顶] Ajax程序:处理异步调用中的异常(使用Asp.Net Ajax内建的异常处理方法)
- Zend server最大化应用程序的性能、扩展性和可用性
- Heritrix1.14.4在Eclipse的配置和使用
- VC中基于 Windows 的精确定时
- com.android.support:design
- 构建自己的代码库在Code-Google上
- Hibernate 再接触 核心开发接口
- title
- 禅道项目管理软件 为提交Bug页面设置bug必填字段
- 解决Myeclipse中导入自定义的配色方案后,JSP中的js代码块为白色背景的问题
- QtCreator源码分析—2.启动主程序(4篇)