CSS3 fading out text | 易学教程

问题

I've been trying to get my text to fade out. I've tried some codes I've found on the internet, but they seem to be only for block elements.
How do I make it work?
Here's what I'm trying to get:

Oh, and I DON'T want Internet Explorer support.

Best regards, MarioErmando

回答1:

Never mind, I've found my own solution.

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%);
}

Unfortunately, only works on webkit.

回答2:

Here is Fiddle Example , you can try likes this .

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%);
 }
 */

回答3:

For Googlers, here is a simple generic solution I figured out after scouring the internet.

.excerpt {
  position: relative;
}

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

You can play with the parameters of linear-gradient to get different results, such as to right, or transparent 25%.

Try the Fiddle.

回答4:

For the folks coming here from the future, CSS4 probably already includes:

text-overflow: fade;

https://drafts.csswg.org/css-ui-4/#text-overflow

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

Greetings from 2017.

来源：https://stackoverflow.com/questions/17500407/css3-fading-out-text

标签

css

gradient

blur