css - CSS3淡出文本

Question

我一直试图让我的文字淡出。我尝试了一些我在互联网上找到的代码，但它们似乎只适用于块元素。
我如何使它工作？
这是我想要得到的：

哦，我不想要 Internet Explorer 支持。

最好的问候，马里奥厄曼多

Answer 1

没关系，我已经找到了自己的解决方案。

blablablabla<span class="readmore">blablablabla</span>

.readmore {
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);
}

不幸的是，仅适用于 webkit。

Answer 2

这是Fiddle 示例，您可以尝试喜欢这个。

html

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum massa     nec mi porta ut dictum dolor consectetur. Nunc imperdiet fermentum mauris, aliquam rhoncus magna suscipit eget. Cras neque velit, posuere ut pulvinar eu, faucibus sit amet tellus. Nullam sed orci tempus risus commodo commodo.</li>
</ul>

css

body {
font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
font-size: 13px;
 }

 ul { margin: 20px; padding: 0; }

 li {
position: relative;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
 }
 li:after {
content: "";
pointer-events: none;
position: absolute;
width: 100px;
height: 100%;
top: 0; right: 0;

background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
 }

 /*
 This piece of code works great too, but only on Webkit Browsers!
 li {
color: white;
position: relative;
overflow: hidden;
white-space: nowrap;
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
 }
 */

Answer 3

对于Google 员工，这是我在网上搜索后想出的一个简单的通用解决方案。

.excerpt {
  position: relative;
}

.excerpt::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(to bottom, transparent, white);
}

您可以使用 的参数linear-gradient来获得不同的结果，例如to right, 或transparent 25%。

试试小提琴。

Answer 4

对于从未来来到这里的人来说，CSS4可能已经包括：

text-overflow: fade;

https://drafts.c​​sswg.org/css-ui-4/#text-overflow

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

来自 2017 年的问候。