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

position:absolute</div>

3.end<br>float:right

</div>

.end {

float: right; position: relative;

width: 100px;

background: #FFA; }

.realend {

position: absolute;

width: 100%;

top: -50px;

left: 300px;

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

今朝，最左侧的prop元素的感化在于让realend元素在文本溢出时处在颇┞俘下方，在前几节的示例代码中为了直不雅的演示，设置prop元素的宽度为100px，那么如今为了更好的模仿实际的效不雅，我们缩小逐渐缩小prop元素的宽度。

这一步中，我们重要关怀的是realend元素的定位，基于浮动后的end元素设置偏移量，当end元素浮动到第一节第二章图的地位时(即在prop元素的下方)，此时realend元素正好处在end元素的上方50px，右侧300px-100px=200px处，而该地位恰是父包含框wrap元素的右下角，此时恰是我们等待的结不雅：

若父元素并没有溢出，那么realend元素会涌如今其右侧

这种情况解决很简单，请看下文之第七节，此处仅作实例解释。

3rd 优化定位模型

在第二节中，我们针对end元素设置了相对定位，对realend元素设置绝对定位。然则我们可以采取更为简单的代率攀来实现，即只应用相对定位。熟悉定位模型的同窗应当知道，相对定位的元素仍然占据文本流，同时仍可针对元素设置偏移。如许，就可以去掉落end元素，仅针对realend元素设置相对定位。

其他的属性并不改变，效不雅一样。

4th 削窄prop元素

<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> 
 
  
 
  
 
.prop { 
 
  	
			 3/7   首页 上一页 1 2 3 4 5 6 下一页 尾页	
			

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


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