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

float: left;

width: 5px;

height: 200px;

background: #F0F; }

.main {

float: right;

width: 300px;

margin-left: -5px;

background: #AFF; }

.realend {

float: right;

position: relative;

top: -50px;

left: 300px;

width: 100px;

margin-left: -100px;

padding-right: 5px;

background: #FAA; font-size: 14px; }

针对prop元素，缩小宽度为5px，其余属性不变;

针对main元素，设置margin-left:5px，让main元素左移5px，如许main元素在宽度上就完全占满了父元素;

具体可参考我之前的文┞仿负margin的道理以及应用一文。

因为CSS规范规定padding的值弗成认为负数，是以只有设置margind-left为负值，且等于其宽度。如许做的最注目标就是包管realend元素处在prop元素的下方，包管在文本溢出的情况下定位精确性:

5th 持续优化：流式构造+伪元素

今朝，realend元素的相干属性仍采取px度量，为了更好的扩大性，可以改用%替代。

同时，prop元素和realend元素可以采取伪元素来实现，削减额外标签的应用。

效不雅图和上节一样。

6th 隐蔽

之前的实现中在文本未溢出的情况下，realend元素会涌如今父元素的右侧，正如。

解决此问题很简单，急须要设置：

.ellipsis{ 
 
    overflow:hidden; 
 
}

即可解决问题。

7th 大年夜功告成

如今我们离完结就差一步了，即去掉落各元素的配风景，并且用“…”调换文本。最后为了优化体验，采取渐变来隐蔽“…”覆盖的文本，并设置了一些兼容性的属性。

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许修改，并添加译者的一些感触，请各位读者谅解。

对于realend元素，top、left和width的值不变。而设置margin-left: -100px、padding-right: 5px则是为了让realend元素的盒模型的最终宽度计算为5px。

<div class="ellipsis"> 
 
  <div>2.main<br>float:left<br>Fairly short text 
 
  </div> 	
			 4/7   首页 上一页 2 3 4 5 6 7 下一页 尾页	
			

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


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