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
 

最新文章

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

热门文章

  1. hacker模拟环境
  2. 万能BI工具时代,聊天记录也能做数据分析?
  3. Window常用快捷键
  4. 【基础概念】匹夫细说C#:不是“栈类型”的值类型,从生命周期聊存储位置
  5. 【C#基础概念】函数参数默认值和指定传参和方法参数
  6. (转载)虚拟化(3):os调度策略。
  7. 使用Three.js实现神奇的3D文字悬浮效果
  8. SpringBoot 搭建基于 MinIO 的高性能存储服务
  9. 在 Debian 和 Ubuntu 上安装 Cutefish 可爱鱼
  10. windows禁止iis开机自启