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

<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; }

2nd 模仿场景

我们经由过程创建一个子元素来替代将要显示的省略号，当文本溢出的情况下该元素显示在精确的地位上。在接下来的实现中，我们创建了一个realend元素，并应用上一节end元素浮动后的地位来实现realend元素的定位。

<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="end"> 
 
   <div class="realend"> 
 
     4.realend<br> 	
			 2/7   首页 上一页 1 2 3 4 5 6 下一页 尾页	
			

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


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