如果文本大于允许范围，则用css溢出淡出文本

当文本的数量大于行可以处理的时候，我试图创build一个淡出文本的效果。 我正在通过max-height ， overflow和linear-gradient的混合来实现这一点。 像这样的东西。

 max-height:200px; overflow:hidden; text-overflow: ellipsis; background: -webkit-linear-gradient(#000, #fff); 

完整的小提琴可用 。 我试图达到类似于这个效果

我有点亲近 问题是，在我的情况下，文本从一开始就开始淡出，我希望它只有在真正接近最大尺寸时才开始淡出。 让我们说开始淡出，如果它已经是150px。 此外，我只使用-webkit前缀，我假设可能有其他前缀，我可以添加其他渲染引擎。

有没有办法在纯CSS做到这一点？

Answer 1

看起来像你的要求只是淡出从一定的高度（约150px）开始的文本，在该高度呈现的文本（如果有的话）被认为是溢出。 所以你可以尝试使用放置在文本区域顶部的某种透明线性渐变图层，我们可以使用伪元素以一种整洁的方式实现这一点:before like：

 .row:before { content:''; width:100%; height:100%; position:absolute; left:0; top:0; background:linear-gradient(transparent 150px, white); } 

小提琴

Answer 2

我build议这样的事情：

将渐变应用于绝对定位的伪元素（ :after ），该元素的顶部位置为160px，高度为40px – 这样就不会在较短的框中显示（因为它们的max-height与overflow:hidden ）。 而渐变本身是从完全透明（ rgba(0,0,0,0) ）到纯黑色。

 .row{ position:relative; /* … */ } .row:after { content:""; position:absolute; top:160px; left:0; height:40px; width:100%; background: linear-gradient(rgba(0,0,0,0), #000); } 

http://jsfiddle.net/b9vtW/2/

Answer 3

我build议您使用http://www.colorzilla.com/gradient-editor/ 。

你在找什么可能是：

 background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ 

如果没有工作，如你所愿，复制并粘贴在URL（CSS窗口）的CSS并随意修改。

Answer 4

我想你正在寻找这样的东西，对吧？

http://jsfiddle.net/QPFkH/

 .text { position:relative; width:200px; max-height:10em; overflow:hidden; } .shadow { position:absolute; top:8em; width:100%; height:2em; background: -webkit-linear-gradient(transparent, white); background: -o-linear-gradient(transparent, white); background: -moz-linear-gradient(transparent, white); background: linear-gradient(transparent, white); } 

Answer 5

你的代码是正确的，只是线性渐变百分比必须设置

 background: -webkit-linear-gradient(top,#000 70%, #fff); 

尝试小提琴链接

http://jsfiddle.net/ShinyMetilda/kb4fL/1/

你可以像这样在像素中指定它

  background: -webkit-linear-gradient(top,#000 140px, #fff); 

两者都是一样的

Answer 6

如果您不需要依赖百分比值，请使用box-shadow而不是background-image 。 它使得用户可以与无用pointer-events: none背后的元素交互pointer-events: none （ http://caniuse.com/#feat=pointer-events ）：

 box-shadow: 0 0 2em 1em #f00; height: 0; 

但要注意的是，box-shadow会减慢滚动速度：

• http://nerds.airbnb.com/box-shadows-are-expensive-to-paint

Answer 7

我使用这种方法使底部透明。

http://jsfiddle.net/IAMCHIEF/x7qLon18/4/

 .row{ position:relative; width: 300px; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 3px solid #777; max-height:200px; overflow:hidden; color:#fff; background:#000; } .row:after { content: ""; position: absolute; top: 137px; left: 0; height: 40px; width: 100%; background: -webkit-linear-gradient(rgba(255, 255,255, .4), rgba(255, 255, 255, 1)); } 

 <div class="row"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="row"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="row"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed </div>