如何用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 引子

BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;

<div class="wrap"> 
 
  <div class="prop">1.prop<br>float:right</div> 
 
  <div class="main">2.main<br>float:left<br>Fairly short text</div> 
 
  <div class="realend"> 
 
  3.realend<br>position:relative</div> 
 
</div> 
 
  
 
.realend { 
 
    float: right; 
 
        position: relative; 
 
    width: 100px; 
 
    top: -50px; left: 300px; 
 
    background: #FAA; font-size: 14px; }

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

<div class="wrap"> 
 
  <div class="prop">1.prop<br>float:left</div> 
 	
			 1/7    1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　最适合人工智能开发的5种编程语言
            
            自负年夜客岁，AlphaGo打遍世界棋手无敌手，人工智能的风头就一向无人能及。在方才以前的IT领袖峰会上，BAT三位大年夜佬都看大好人工智能的将来成长。本年事首?年代，百度就做了一个大年>>>详细阅读


本文标题：如何用CSS实现多行文本的省略号显示
地址：http://www.17bianji.com/lsqh/34641.html
 1/2    1