如何顯示多行文本的省略號？

Question

我有這種風格

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

這使得這樣的：

如果我刪除white-space: nowrap;我得到這樣的：

但我想ellispes從第三行開始（或者僅在文本較短時才使用）

Answer 1

那麼有多種方法可以做到這一點，請檢查下面的代碼片段的某些人。

@import url(http://fonts.googleapis.com/css?family=Open+Sans); 
 

 
body { 
 
    padding: 20px; 
 
    font: 1.2em/1.2em 'Open Sans', sans-serif; 
 
} 
 
.module { 
 
    width: 250px; 
 
    margin: 0 0 1em 0; 
 
    overflow: hidden; 
 
} 
 
.module p { 
 
    margin: 0; 
 
} 
 

 
.line-clamp { 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 3; 
 
    -webkit-box-orient: vertical; 
 
} 
 

 
.fade { 
 
    position: relative; 
 
    height: 3.6em; /* exactly three lines */ 
 
} 
 
.fade:after { 
 
    content: ""; 
 
    text-align: right; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 70%; 
 
    height: 1.2em; 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); 
 
} 
 

 
.last-line { 
 
    height: 3.6em; /* exactly three lines */ 
 
    text-overflow: -o-ellipsis-lastline; 
 
} 
 

 
.ftellipsis { 
 
    height: 3.6em; 
 
} 
 

 
h1 { 
 
    margin: 0 0 1em 0; 
 
} 
 
h2 { 
 
    font-size: 1.2em; 
 
}

<h1>Line Clampin'</h1> 
 

 
    <h2>Weird WebKit Flexbox Way</h2> 
 
    <div class="module line-clamp"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
 
    </div> 
 

 
    <h2>Fade Out Way</h2> 
 
    <div class="module fade"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
 
    </div> 
 

 
    <h2>Opera Overflow Way</h2> 
 
    <div class="module last-line"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
 
    </div> 
 

 
    <h2>ftellipsis Way</h2> 
 
    <div class="module js ftellipsis" id="ftellipsis"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
 
    </div>

還檢查了此鏈接：https://css-tricks.com/line-clampin/