javascript - Amazon のようなテキスト要約のフェード効果?

Question

たとえば Amazon の本を見ると、テキストの要約を短縮するためのかなり優れた (そして省略記号よりもはるかに直感的な) 効果が見られます。

これを行うための十分に文書化された方法、またはそのようなテキストの要約を容易にするライブラリはありますか?

Answer 1

余分なコンテンツは、次のルールで非表示にされheight: 200px;ますoverflow: hidden;。に適用されていることがわかります#outer_postBodyPS。ただし、フェード効果は次のように処理され#psGradientます。

background: -moz-linear-gradient(bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );
background: -webkit-gradient(linear, bottom, top, color-stop(15%, rgb(255, 255, 255)), color-stop(100%, rgba(255, 255, 255, 0)) );
background: -webkit-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
background: -o-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
background: -ms-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% ); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03ffffff', endColorstr='#ffffff', GradientType=0 ); 
background: linear-gradient(bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );

プレフィックス付きのさまざまなルール (およびフィルター) は、ブラウザー固有のインスタンス専用です。

http://z-ecx.images-amazon.com/images/G/01/browser-scripts/dpMergedOverallCSS/dpMergedOverallCSS-12049068973で、これらのルールを使用してスタイルシート全体を調べることができます。V1 .css .

Answer 2

視覚効果は単にCSSです。「フェード」錯視を追加するグラデーション画像が下部に固定されたdivがあります。オーバーレイをに設定しposition:fixed;bottom:0て、その視覚効果を追加します。

実際にテキストを切り捨てる限り、それを行う方法はたくさんあります。最も簡単な方法は、PHPのsubstrのような部分文字列関数を使用することです。http://php.net/manual/en/function.substr.phpそしてX文字の後に単に切り取ります。

または、 http：//php.net/manual/en/function.explode.php [space]文字の文字列を分解すると、単語の配列が返されます。次に、その配列を簡単に繰り返し処理し、Xワードに達したときに停止できます...