Css 溢出隐藏的 div 褪色

Question

这是我想要的东西achieve .

类似于 this 的东西*但这会通过使用颜色而褪色。

<div class="something">
  <div class="inside">
    <p>Long wordingggggggggggggggggggggggggggggggggggg</p>
  </div>
</div>

.something { overflow:hidden; width: 100px; }

我想让 div 的不透明度变淡，而不是颜色。有可能吗？

Answer 1

.wrapper{
background: orange;
}
.big-font{
font-size: 25px;
}
.fade-right {
background: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fade-left {
background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fade-up {
background: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fade-down {
background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
            

<div class="wrapper">
<p class="big-font fade-right">Long wordingggggggggggggggggggggggggggggggggggg</p>
<p class="big-font fade-left">Long wordingggggggggggggggggggggggggggggggggggg</p>
<p class="big-font fade-up">Long wordingggggggggggggggggggggggggggggggggggg</p>
<p class="big-font fade-down">Long wordingggggggggggggggggggggggggggggggggggg</p>
</div>