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

我试图创建一个文本淡出效果时，文本的数量大于行可以处理。我是通过 max-height，overflow和 linear-gradient的混合来达到这个目的的。就像这样。

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

我试图达到类似这个效果 < img src = “ https://i.stack.imgur.com/23OxY.png”alt = “ enter image description here”>

我已经很接近了。问题是，在我的情况下，文本开始淡出从一开始，我希望它开始淡出，只有当它是真正接近最大大小。让我们说开始淡出，如果它已经是150像素。另外，我只使用 -webkit前缀，我认为可能有其他前缀，我可以添加其他渲染引擎。

有没有一种方法可以做到这一点，在纯 CSS？

133605 次浏览
小开

I recomend you to use 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.

小开

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/

You could alse specfiy it in pixel like this

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

Both works the same

小开

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

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

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.

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

小开
最佳答案

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:

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

Fiddle

小开

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: 0 0 2em 1em #f00;
height: 0;

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

小开

I used this method to make the bottom transparent.

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>

小开

I had a similar problem with a bootstrap button which has a vertical gradient and also change of gradient on hover. This worked for me.

<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

小开

I used this method derived from reddit pages & it works fine

.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>

小开

My variant with a gradient appearing with overflowing

.row {
width: 300px;
max-height: 200px;
position: relative;
display: flex;
flex-flow: column-reverse wrap;
overflow: hidden;
}


.content {
max-height: 100%;
overflow: hidden;
}


.background {
width: 100%;
height: 1px;
position: relative;
}


.background:before {
content: '';
display: block;
width: 100%;
height: 150px;
left: -100%;
bottom: 0;
position: absolute;
background: linear-gradient(transparent, white);
pointer-events: none
}
<div class="row">
<div class="content">content</div>
<div class="background"></div>
</div>

JSFiddle

小开

You need to have a containing outer <div> set to position: realtive; with something like <p>Some text to be faded in here</p> with a position: absolute; top: 0; left: 0;. You also need another <div> inside the outer <div> and at the same level as the <p>, also set with position: absolute; top: 0; left: 0; and a height and width set to match the area you wish to fade. This should also have z-index: 10; background-image: linear-gradient(transparent, rgba(255,255,255,1));. This removes the need for the webkit options.

小开

The right one guys

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

Just make the Hight Fixed and apply this, it´s going to work just fine.


提交答案