如果文本大于允许的话,使用css淡出溢出的文本

Question

当文本的数量大于行可以处理的数量时,我正在尝试创建文本淡出效果.我用的混合物实现这一目标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一点:

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

小提琴

Answer 2

我建议这样的事情:

将渐变应用于绝对定位的伪元素(:after),从顶部以40px高度定位为160px - 这样,它就不会在较短的框中显示(因为它们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

我使用了从 reddit 页面派生的这种方法，它工作正常

.fade {
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  }

<div>
    <div class="fade">
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    </div>
</div>

Answer 4

正确的人

\n

-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);\n

\n

只需将 Hight 固定并应用它，它\xc2\xb4s 就会正常工作。

\n

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

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

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