javascript - 类似于亚马逊的文本摘要的淡化效果？

Question

例如，如果你在亚马逊上看一本书，你会看到一个相当不错的（并且比省略号更直观）的文本摘要缩写效果：

是否有一个有据可查的方法来做这件事，或者有一个图书馆可以促进这样的文本摘要？

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添加该视觉效果。

就实际截断文本而言，有很多方法可以做到这一点。最简单的方法是使用 substring 函数，例如 PHP 的 substr。http://php.net/manual/en/function.substr.php并在 X 字符后简单地切断。

或者，您可以分解http://php.net/manual/en/function.explode.php [空格] 字符上的字符串，这将返回一个单词数组。然后，您可以轻松地遍历该数组并在达到 X 个单词时停止...