Я пытался заставить мой текст исчезать. Я попробовал несколько кодов, которые нашел в Интернете, но они, похоже, предназначены только для блочных элементов.
Как мне заставить их работать?
Вот что я пытаюсь получить: 
О, и я НЕ хочу поддержки Internet Explorer.
С уважением, Марио Эрмандо
Неважно, я нашел свое собственное решение.
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.
Вот Пример скрипки, вы можете попробовать это.
<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>
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%);
}
*/
white-space: nowrap;?
- person Duncan; 06.07.2013
Для сотрудников 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%.
Для тех, кто придет сюда из будущего, CSS4, вероятно, уже включает в себя:
text-overflow: fade;
https://drafts.csswg.org/css-ui-4/#text-overflow
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
Привет из 2017 года.
