在做响应式系统设计的时候，遇到标题多行文字截断的效果，如下图：标题截断效果看似很简单，其实并没有统一的CSS属性来实现它的标准需要一些奇葩的技巧来实现。一般来说，在做这样的文字截断效果的时候，我们更希望的是：兼容性好，对各大主流浏览器的良好支持。响应式截断，根据不同的宽度进行调整。仅当文本超出范围时才会显示省略号。否则，将不会显示省略号。省略号的位置正是基于上述标准。接下来我将介绍实现截断效果的各种技巧，并根据上述评价标准得到最优解。（代码我已经上传到jsfiddle平台，可以点demo地址查看）有了它，只需几行代码就可以轻松截断一行文本。div{空白：nowrap;溢出：隐藏；text-overflow:ellipsis;}实现效果：原生支持属性浏览器，主流浏览器兼容性好，缺点是只支持单行文本截断，不支持多行文本截断。适用场景：单行文本截断最容易实现，效果最好，可以放心使用。如果是多行文字截取效果，就没那么容易实现了。-webkit-line-clamp的实现首先介绍第一种方法，通过-webkit-line-clamp属性实现。具体方式如下：div{display:-webkit-box;溢出：隐藏；-webkit-line-clamp:2;-webkit-box-orient:vertical;}需要结合display，-webkit-box-orient和overflow结合使用：display:-webkit-box;必须组合以将对象显示为灵活的框模型。-webkit-box-orient；必须结合起来设置或检索flexbox对象的子元素的对齐方式的属性。文本溢出：省略号；可选属性，可用于多行文本的情况，使用省略号“...”隐藏超出范围的文本。实现效果：从效果上看，它的优点是：1.响应式截断，根据不同的宽度做调整2.只有当文本超出范围时才显示省略号，否则不显示省略号3.浏览器是原生实现，所以省略号的位置显示的恰到好处但是缺点也很直白，因为-webkit-line-clamp是一个非标准的属性，它没有出现在CSS规范草案中。也就是说，只有以webkit为核心的浏览器才支持该属性。Firefox、IE等浏览器根本不支持该属性，浏览器兼容性不好。使用场景：多用于移动页面，因为移动设备浏览器大多基于webkit内核。除了兼容性差之外，截断的效果还是不错的。定位元素实现多行文本截断另一种靠谱又简单的方法是设置相对定位容器的高度，用一个包含省略号（…）的元素来模拟，实现方法如下：p{position:相对的;行高：18px；高度：36px；溢出：隐藏；}p::after{内容：“...”；字体粗细：粗体；位置：绝对；底部：0；右：0；填充：020px1px45px；/*为了更好的显示*/background:-webkit-gradient(linear,lefttop,righttop,from(rgba(255,255,255,0)),to(white),color-stop(50%,white));背景：-moz-linear-gradient（向右，rgba（255、255、255、0），白色50%，白色）；背景：-o-linear-gradient（向右，rgba（255、255、255、0），白色50%，白色）；背景：-ms-linear-gradient（向右，rgba（255、255、255、0），白色50%，白色）；background:linear-gradient(toright,rgba(255,255,255,0),white50%,white);}实现原理很容易理解，就是伪元素绝对定位到最后行和文字被覆盖，然后通过overflow:hidden隐藏多余的文字。实现效果：从实现效果来看，优点：1.兼容性好，对主流主流浏览器支持较好2.响应式截断，根据不同宽度做调整，但无法识别文字长度，即仅当文本超出范围时才显示省略号，否则不显示省略号。另外，由于我们在文本末尾人为地添加了省略号效果，因此它不会非常贴合文本。在这种情况下，您可以添加word-break:break-all;在Split换行符中写一个词。适用场景：文本内容比较多，文本内容肯定会超出容器，所以这个方法是个不错的选择。浮动特性实现多行文本截断。回到开头，我要做的是截断多行标题文本。显然，标题的长度是无法控制的。显然，上面的方法是不能用的。回到事情的本质：我们希望CSS可以有一个属性，当文字溢出时可以显示省略号，没有溢出时不显示省略号。（两种形式，两种效果）就在我觉得CSS无能为力，只能通过JS实现的时候，后来看到一个非常巧妙的方法，可以满足上述所有条件。下面我将介绍如何使用float特性来实现多行文字截断效果。基本原理：一共有三个div框，粉色框向左浮动，浅蓝色框和黄色框向右浮动，1.当浅蓝色框高度低于粉色框时，黄色框仍将位于浅蓝色框的右下方。2.如果浅蓝色框文字过多，高度超过粉色框，黄色框不会停留在右下方，而是落在粉色框下方。好了，两种状态的两种显示形式已经区分了，那么我们就可以对黄色框进行相对定位，将内容溢出的黄色框移动到文字内容的右下角，没有溢出的就是移到外面的空间就没有了，只要我们用overflow:hidden，就可以把它隐藏起来。基本原理是这样的，我们可以把淡蓝色区域想象成标题，黄色区域想象成省略号效果。那么你可能会认为粉红色的框占用空间，所以标题会整体延迟。这里可以用margin的负值来搞定。将浅蓝色框的margin-left负值设置为与粉色框的宽度相同，标题也正常显示。然后我们将之前的DOM结构简化为：
