Html 如果文本大于允许值，则使用 css 在溢出时淡出文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22808040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fading out text on overflow with css if the text is bigger than allowed
提问by Salvador Dali
I am trying to create a text fade-out effect when the amount of text is bigger than the row can handle. I am achieving this with the mixture of max-height, overflowand linear-gradient. Something like this.
当文本量大于行可以处理时，我正在尝试创建文本淡出效果。我正在通过max-height,overflow和的混合物实现这一目标linear-gradient。像这样的东西。
max-height:200px;
overflow:hidden;
text-overflow: ellipsis;
background: -webkit-linear-gradient(#000, #fff);
The full fiddle is available. I am trying to achieve effect similar to this one 
该全小提琴可用。我试图达到类似于这个的效果
and I am kind of close. The problem is that in my case text start to fade-out from the very beginning and I want it to start fading out only if it is really close to maximum size. Lets say start fading out if it is already 150px. Also I am using only -webkitprefix and I assume that there may be other prefixes that I can add for other rendering engines.
我有点接近。问题是，在我的情况下，文本从一开始就开始淡出，我希望它只有在真正接近最大尺寸时才开始淡出。让我们说如果它已经是 150px 就开始淡出。此外，我仅使用-webkit前缀，并且我假设可能还有其他前缀可以为其他渲染引擎添加。
Is there a way to do this in pure CSS?
有没有办法在纯 CSS 中做到这一点？
回答by King King
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 transparentlinear gradient layer placed on top of the text area, we can achieve this in a neat way using the pseudo-element :beforelike this:
看起来您的要求只是从某个高度（约 150 像素）开始淡出文本，在该高度显示的文本（如果有）被视为溢出。所以你可以尝试使用放置在文本区域顶部的某种透明线性渐变层，我们可以使用这样的伪元素以简洁的方式实现这:before一点：
.row:before {
content:'';
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:linear-gradient(transparent 150px, white);
}
回答by CBroe
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-heightin combination with overflow:hidden). And the gradient itself is from totally transparent (rgba(0,0,0,0)) to solid black.
将渐变应用于绝对定位的伪元素 ( :after)，该元素位于距顶部 160像素、高度为 40 像素的位置 - 这样，它就不会在较短的框中显示（因为它们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);
}
回答by Ripaz
I think your are looking for something like this, right?
我想你正在寻找这样的东西，对吧？
.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);
}
回答by ShinyJos
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
两者的工作原理相同
回答by yckart
If you don't need to rely on percentage values, use box-shadowinstead 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。无需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:
但请注意， box-shadow 会减慢滚动速度：
回答by Alvaro Menéndez
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 复制并粘贴到 url（css 窗口）中并随意修改。
回答by Andy Gee
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);
}
回答by Arun Prasad E S
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));
}<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>