如果文本大于允许值,则在CSS溢出时淡出文本 [英] Fading out text on overflow with css if the text is bigger than allowed
问题描述
我试图在文本量大于行可处理量时创建文本淡出效果。我通过最大高度
,溢出
和线性梯度
。
max-height:200px;
溢出:隐藏;
文字溢出:省略号;
背景:-webkit-linear-gradient(#000,#fff);
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
, overflow
and linear-gradient
. Something like this.
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 -webkit
prefix and I assume that there may be other prefixes that I can add for other rendering engines.
Is there a way to do this in pure CSS?
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);
}
这篇关于如果文本大于允许值,则在CSS溢出时淡出文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!