前言 在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文 ...

单行截断 此方法兼容到ie6过。不过只能单行。 多行截断 此方法webkit私有，并且使用flex布局，只得在移动端和高版本 -webkit- 系列浏览器使用。 多行截断2 利用浮动元素特性模拟最后的省略号。 兼容性好，对各大主流浏览器有好的支持。 响应式截断 ...

项目中常常有这种需要我们对溢出文本进行"..."显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教。 单行 语法 示例 文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号 多行 1.直接用css属性设置 ...

; white-space:nowrap 示例 文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号 ...

单行： 多行：（webkit与移动端） 多行：（适用于所有） 效果图： 附： 字节计算方法的博文：正则表达式：备注名称长... ...

单行文本溢出 多行文本溢出 ...

1、css text-overflow语法：text-overflow : clip | ellipsis text-overflow参数值和解释：clip : 　不显示省略标记（...），而是简单的裁切ellipsis : 　当对象内文本溢出时显示省略标记（...） 单行 ...

本文记录实现文本溢出显示省略号的几种方式。 单行文本 三行CSS代码实现： 注意： 设置文本溢出显示省略号时必须有宽度 width； 必须要设置display属性为line-block/block,设置为其他值不生效。 多行文本 1. CSS代码实现 这种方式用于 ...