div固定大小文字溢出自动缩小_CSS 实现单行、多行文字截断，实现以...结尾的效果...

在项目需求开发时，由于文本内容长度的不确定性，经常会碰到文本内容超出的问题，通常这种情况，UI/UE都会要求我们将超出部分用省略号(...)来显示，这种做法基本上已经是一个业界共识了。然而，这么一个理所当然的效果，在前端却一直是一个难题。

如下图：

看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：

1. 兼容性好，对各大主流浏览器有好的支持
2. 响应式截断，根据不同宽度做出调整
3. 文本超出范围才显示省略号，否则不显示省略号
4. 省略号位置显示刚好

基于上述的准则，下面我就讲介绍各种技巧实现截断效果，并根据上述的评判标准得出最优解

单行文本溢出截断

单行文本溢出截断相信大家都是顺手拈来了。关键点是使用：text-overflow: ellipsis;。以及在某些元素下还要注意换行问题。

div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #ff7733; color: white;}

效果如下

浏览器的兼容性还是可以哒

单行最多展示九个字