我正在尝试创建Google在文本末尾使用的那些淡入淡出效果中的一种，而不是省略号或仅使用来剪掉文本overflow:hidden。
我通过创建：before元素来做到这一点，将其放置在右侧。
这是我使用的mixin：
.OverflowFadeRight(@color)
{
position:relative;
&:before {
content:"";
height:100%;
position:absolute;
top:0;
right:0;
width:4.8rem;
.GradientLTR(transparent; @color);
}
}
该代码有效，但是我想做的是将宽度设置为与高度相同，因此它总是成比例的，即父代的高度的100％。
我见过根据宽度设置高度的技术，但是可以这样做吗？
事实证明，height:100%使用伪元素创建正方形可能是不可能的。
创建“响应方块”的方法是使用img标签。
它允许设置高度，并将按比例自动调整其宽度。
替代方法是使用宽度百分比。
这是一个使用之一。 demo
<!-- Empty image 1x1 pixels as gif base64 data -->
<div class="OverflowFadeRight2">Real square with img
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句