如果文本大于允许，则用css淡出文本-Fadingouttextonoverflowwithcssifthetextisbiggerthanallowed

77  

Looks like your requirement is just to fade out the text beginning at a certain height (about 150px), the text (if any) presenting at that height is considered as overflow. So you can try using some kind of transparent linear gradient layer placed on top of the text area, we can achieve this in a neat way using the pseudo-element :before like this:

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

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

Fiddle

小提琴

9  

I’d suggest something like this:

我建议这样的事情：

Apply the gradient to an absolutely positioned pseudo-element (:after), that get’s positioned at say 160px from top with 40px height – that way, it’ll not be shown at all in shorter boxes (because of their max-height in combination with overflow:hidden). And the gradient itself is from totally transparent (rgba(0,0,0,0)) to solid black.

将渐变应用于绝对定位的伪元素（：after），从顶部以40px高度定位于160px - 这样，在较短的框中根本不显示（因为它们的最大高度组合）溢出：隐藏）。渐变本身是完全透明的（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/

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

2  

I recomend you to use http://www.colorzilla.com/gradient-editor/.

我建议你使用http://www.colorzilla.com/gradient-editor/。

What you are looking for may be:

您正在寻找的可能是：

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 */

and if not workign as you wish, copy and paste those css in the url (css window) and modifie it at will.

如果不按照您的意愿工作，请将这些css复制并粘贴到网址（css窗口）中并随意修改它。

2  

I think your are looking for something like this, right?

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

http://jsfiddle.net/QPFkH/

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);
}

2  

Your code is correct just the liner gradient percent must be set

您的代码是正确的，只需设置线性渐变百分比

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

Try the fiddle link

尝试小提琴链接

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

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

You could alse specfiy it in pixel like this

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

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

Both works the same

两者的作用相同

0  

If you don't need to rely on percentage values, use box-shadow instead of background-image. It makes it possible to let the user interact with the elements behind your fading-thingy, without the need of pointer-events: none (http://caniuse.com/#feat=pointer-events):

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

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

But be warned, box-shadow can slow down scrolling:

但要注意，box-shadow可以减慢滚动速度：

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

0  

I used this method to make the bottom transparent.

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

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

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));
}

	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.


	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.


	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed