存在 css 属性 text-overflow: ellipsis .它剪切了太长的文本并附加了省略号。
但我需要淡化最后可见的符号而不是附加省略号。
有没有简单的方法来实现这个?
我的实现看起来非常复杂,我正在寻找更简单的实现:
<div class='container'>
<div class='fade_box'>
</div>
<div class='behind'>
<div class='right_box'>
</div>
In literary theory, a text is any object that can be "read"
</div>
</div>
div.container {
width:100px;
line-height:16px;
height:48px; /* 3*line-height */
overflow:hidden;
position:relative;
}
.behind {
width:200%;
}
.right_box{
width:50%;
height: 32px; /* 2*line-height */
float:right;
}
.fade_box{
position:absolute;
width:64px;
height:16px; /* 1*line-height */
bottom:0;
right:0;
background: -moz-linear-gradient(left center, rgba(255, 255, 255, 0), #FFFFFF);
}
最佳答案
http://jsfiddle.net/DomDay/cYc83/4/
为了避免在需要淡入淡出的地方添加渐变框,可以这样做:
.fade-elipsis:after {
content: ".";
color: transparent;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
background: -moz-linear-gradient(left center, rgba(255, 255, 255, 0), #FFFFFF);
}
并将类 fade-elipsis
添加到要覆盖的任何文本框。这可能有点整洁。
关于html - 如何实现长多行字符串的最后几个可见符号的淡入淡出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17563196/