CSSテキストオーバーフロー - テキストは（n）を拡張する場合、省略記号を適用番目のライン

Question

私は新しい行にあふれてからテキストを防ぐためには、次のコードを使用しています：予想通りこれは、作品

.info-box{ 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    height: 3em; 
    width: 300px; 
    font-size: 1em; 
    line-height: 1em; 
} 

が、このボックスには3行の余裕があります。テキストが3行目を超えている場合、どのようにしてエリプシスを適用するようブラウザに指示できますか？それとも、テキストオーバーフローは1つだけに作用しますか？

私はこのためにJSが必要な場合は私のprobsは気にしません。

Answer 1

このようにCSSで偽装できます。

の先頭に<span>...</span>を追加します。

1. がnowrapとtext-overflow

2. を取り除くあなたのCSSで

   <div class="info-box"><span>...</span>Lorem ipsum dolar etc.</div> 
   

   spanダウン右下によっていくつかpadding-right

3. 位置を追加します。

CSS

.info-box{ 
    overflow:hidden; 
    height: 3em; 
    width: 300px; 
    font-size: 1em; 
    line-height: 1em; 
    padding-right:20px; 
} 

.info-box span{ 
    position:relative; 
    top:31px; 
    left:297px; 
    display:inline-block; 
} 

実施例：http://jsfiddle.net/jasongennaro/UeCsk/

FYI ...省略記号をすることになっている左上、に小さなギャップがあるでしょう（使用しているため）position:relative;

fyi 2 ...これはtopとleftを調整することを条件に、あなたが望む多くの行（問題の3つを挙げた）で動作するはずです。

Answer 2

これは古い質問ですが、私はこの修正を見つけました。

https://codepen.io/martinwolf/pen/qlFdp

@import "compass/css3"; 

/* Martin Wolf CodePen Standard */ 

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700); 

* { 
    margin: 0; 
    padding: 0; 
    @include box-sizing(border-box); 
} 

body { 
    padding: 3em 2em; 
    font-family: 'Open Sans', Arial, sans-serif; 
    color: #cf6824; 
    background: #f7f5eb; 
} 

/* END Martin Wolf CodePen Standard */ 


$font-size: 26px; 
$line-height: 1.4; 
$lines-to-show: 3; 

h2 { 
    display: block; /* Fallback for non-webkit */ 
    display: -webkit-box; 
    max-width: 400px; 
    height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ 
    margin: 0 auto; 
    font-size: $font-size; 
    line-height: $line-height; 
    -webkit-line-clamp: $lines-to-show; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}