本文翻译自CSSEllipsis：HowtoManageMulti-LineEllipsisinPureCSS，文章部分内容略有改动，部分思路已添加译者，请读者谅解。合理截断多行文本并不容易。我们通常使用几种方法来解决：overflow:hidden直接隐藏冗余文本text-overflow:ellipsis只适合单行文本处理各种脆弱的javascript实现。这个实现之所以脆弱，是因为文本长度发生变化时需要获取回流（relayout）后的布局信息，比如宽度。英文原文写于2012.9。但是，作者忽略了WebKit提供的一个扩展属性——webkit-line-clamp，它不是CSS规范中的属性。使用该属性实现多行文本的省略号显示需要配合其他三个属性：display:-webkit-box,-webkit-box-orient,text-overflow:ellipsis;。其中，-webkit-line-clamp设置块元素包含的文本行数；display:-webkit-box设置块元素的布局为灵活布局；-webkit-box-orient设置灵活项的布局方向；文本溢出：省略号；表示超出方框的部分用省略号表示。而本文要介绍的方法是利用CSS规范中的属性，结合特殊的实现技术完成的。这意味着所有实现CSS2.1规范的浏览器都是兼容的，不仅在纯移动领域，在传统的PC浏览器（你知道我指的是哪些浏览器）中也是如此。的。好吧，让我们一起看看。CSS实现多行文字溢出的省略号表示我们将实现细节分为7个步骤。这个实现过程中最简单的部分是截断文本，最难的部分是当元素的父包含块位于的右下角时让元素溢出，当父元素没有溢出时元素消失不可见。为了避难，我们先从一个比较简单的地方开始——当父包含框比较小时，子元素布局在父包含框的右下角。1stIntroduction事实上，这个实现充分利用了元素浮动的基本规则。CSS2.1规范中的几种情况我这里就不详细解释了，不懂的读者可以自行查看。这段代码的实现很简单，就是三个子元素和包含块的高度和浮动设置：
float：left
