如何用CSS实现多行文本的省略号显示 英文, 如何, 读者

yuyang911220

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure  CSS,文中某些部分有些许改动，并添加译者的一些感想，请各位读者谅解。
合理的截断多行文本是件不容易的事情，我们通常采用几种方法解决：

   
• overflow: hidden直接隐藏多余的文本   
• text-overflow: ellipsis只适用于单行文本的处理   
• 各种比较脆弱的javascript实现。之所以说这种实现比较脆弱是由于需要文本长度的变化时刻得到回流(relayout)后的布局信息，如宽度

英文原文写作时间是2012.9.18号，比较有意义的一天。不过作者忽略了WebKit提供的一个扩展属性-webkit-line-clamp，它并不是CSS规范中的属性。利用该属性实现多行文本的省略号显示需要配合其他三个属性：display:  -webkit-box、-webkit-box-orient、text-overflow:  ellipsis;。其中，-webkit-line-clamp设置块元素包含的文本行数;display:  -webkit-box设置块元素的布局为伸缩布局;-webkit-box-orient设置伸缩项的布局方向;text-overflow:  ellipsis;则表示超出盒子的部分使用省略号表示。
不过本文将要介绍的方法是采用CSS规范中的属性，并结合特殊的实现技巧完成的。这意味着在实现CSS2.1规范的浏览器中都是可以兼容的，不将仅仅是纯粹的移动端领域，在传统的PC浏览器(你们懂得我指的是哪些浏览器)中仍是可行的。好吧，让我们一起见识下。
CSS实现多行文本溢出的省略号显示
我们把实现的细节划分为7个步骤，在这个实现过程中最简单的就是截断文本，而最难的部分则是让一个元素处在其父包含块溢出时的右下方，并且当父元素未溢出时该元素消失不可见。为了去难避易，我们先从比较简单的地方开始–当父包含框比较小时，将子元素布局到父包含框的右下角。
1st 引子

其实这个实现完全利用了元素浮动的基本规则。在这里不详细讲解CSS2.1规范中的几种情形，不明白的读者自行查阅。这段代码实现很简单，就是三个子元素和包含块的高度及浮动设置：

• <div class="wrap">
• 
  
•   <div class="prop">1.prop<br>float:left</div>
• 
  
•   <div class="main">2.main<br>float:right<br>Fairly short text</div>
• 
  
•   <div class="end">3.end<br>float:right</div>
• 
  
• </div>
• 
  
• 
  
• 
  
• .wrap {
• 
  
•   width: 400px; height: 200px;
• 
  
•     margin: 20px 20px 50px;
• 
  
•     border: 5px solid #AAA;
• 
  
•     line-height: 25px;
• 
  
• }
• 
  
• 
  
• 
  
• .prop {
• 
  
•     float: left;
• 
  
•     width: 100px; height: 200px;
• 
  
•     background: #FAF; }
• 
  
• .main {
• 
  
•     float: right;
• 
  
•     width: 300px;
• 
  
•     background: #AFF; }
• 
  
• .end {
• 
  
•     float: right;
• 
  
•     width: 100px;
• 
  
•     background: #FFA; }