如果文本大于允许值，则在CSS溢出时淡出文本

我试图在文本量大于行可处理量时创建文本淡出效果。我用的混合物实现这一目标max-height，overflow和linear-gradient。这样的事情。

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

该全小提琴可用。我正在努力达到类似于这一效果

而且我有点亲密。问题是在我的情况下，文本从一开始就开始淡出，我希望仅当文本确实接近最大大小时才开始淡出。可以说如果它已经是150px，则开始淡出。另外，我仅使用-webkit前缀，并且我假设可以为其他渲染引擎添加其他前缀。

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

看起来您的要求只是淡出以某个高度（大约150像素）开始的文本，以该高度显示的文本（如果有）被视为溢出。因此，您可以尝试使用放置在文本区域顶部的某种透明的线性渐变图层，我们可以使用伪元素以一种简洁的方式实现此目的，:before如下所示：

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

小提琴

我建议这样的事情：

将渐变应用于绝对定位的伪元素（: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/

我认为您正在寻找类似的东西，对吧？

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

您的代码是正确的，只是必须设置线性梯度百分比

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

尝试小提琴链接

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

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

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

两者都一样

如果您不需要依赖百分比值，请使用box-shadow代替background-image。它使用户无需pointer-events: none（http://caniuse.com/#feat=pointer-events）即可与您的衰落事物背后的元素进行交互：

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

但请注意，阴影框会减慢滚动速度：

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

我建议您使用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 */

如果您无法正常工作，请将这些CSS复制并粘贴到url（css窗口）中，然后随意进行修改。

引导程序按钮有一个类似的问题，该按钮具有垂直渐变，并且在悬停时也会更改渐变。这对我有用。

<button class="btn btn-success" style="width:250px">
      <div class="faderflow">
         SOME TEXT THAT'S TOO LONG FOR THE BUTTON
      </div>
</button>



.faderflow {
    overflow: hidden;

   /* same color as text (white) */
    background: linear-gradient(to right, rgb(255, 255, 255) 80%,rgba(255, 255, 255, 0) 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;

   /* overwrite the bootstrap text shadow  */
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2);
}

https://codepen.io/andyg2/pen/qGmKKN

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

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>