複数行テキストの省略記号を表示するにはどうすればよいですか？

Question

私はこのようなレンダリングこのスタイル

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

を持っている：

私は、このように取得white-space: nowrap;を削除する場合：

しかし、私はellispesをしたいです3行目から（またはテキストが短い場合のみ）

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/

を