CSS：如果大於兩行的文本溢出省略號，有可能嗎？

Question

我有一個寬度爲300px，高度爲20px的div，文本隨機更改。我只想在用2行溢出時才顯示省略號，否則就只用CSS。

http://jsfiddle.net/7BXtr/272/

HTML：

<div id="container"> 
      <div class="box"> 

     <div class="text-body"> 
      <div class="text-inner">This is the text description of the item. 
       It can flow onto more than 2 lines, too, 
       if there is room for it, but otherwise 
       should only show 1 line. 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

#container { 
    width: 104px; 
} 
.box { 

    max-height: 40px; 
    overflow: hidden; 

    border: solid 1px red; 
    position: relative; 
} 
.box:after { 
    content: '...'; 
    position: absolute; 
    left: 84px; 
    bottom: 0; 
} 
.text-body { 
    position: relative; 
} 
.text-body:before { 
    content: ''; 
    position: absolute; 
    left: 80px; 
    top: 14px; 
    width: 12px; 
    height: 2px; 
    background: white; 
} 
.text-inner { 
    width: 90px; 
    padding-right: 10px; 
} 

Answer 1

你可以有隻針對Webkit的大於一行文本溢出省略號，它不是用其他支持供應商尚未

下面是一個三行文字橢圓example：

.three-line-block { 
    line-height: 15px; //for not webkit browser 
    max-height: 45px; //for not webkit browser 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
}