Проверка плавного скрытия текста

by SerGen

HTML

<p class="fade">В соответствии с принципом неопределенности, массоперенос растворяет мозаичный гумус, что дает возможность использования данной методики как универсальной. Криопедология, в первом приближении, приводит к появлению удельный солеперенос, что дает возможность использования данной методики как универсальной.</p>

<p class="textFade" width="300">Тензиометр физически сжимает гистерезис ОГХ только в отсутствие тепло- и массообмена с окружающей средой. Являясь следствием законов широтной зональности и вертикальной поясности, давление почвенной влаги двумерно усиливает биокосный прибор Качинского, и этот процесс может повторяться многократно.</p>

CSS

.fade {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: -webkit-linear-gradient(right,transparent 0,#000 3em);
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxtYXNrIG1hc2tDb250ZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48bGluZWFyR3JhZGllbnQgaWQ9ImEiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmYiIG9mZnNldD0iLjciLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNhKSIvPjwvbWFzaz48L3N2Zz4=#fade-mask");
  -ms-text-overflow: ellipsis;
}

.textFade {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	-webkit-mask-image: -webkit-linear-gradient(right,transparent 0,#000 3em);
	mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxtYXNrIGlkPSJmYWRlLW1hc2siIG1hc2tDb250ZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48bGluZWFyR3JhZGllbnQgaWQ9ImciPjxzdG9wIHN0b3AtY29sb3I9IiNmZmYiIG9mZnNldD0iLjgiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnKSIvPjwvbWFzaz48L3N2Zz4=#fade-mask");
	-ms-text-overflow: ellipsis;
}


p {
    width: 80%;
}

JavaScript

/*

=== fade ===

<svg xmlns="http://www.w3.org/2000/svg">
    <mask maskContentUnits="objectBoundingBox">
        <linearGradient id="a">
            <stop stop-color="#fff" offset=".7"/>
            <stop stop-color="#fff" stop-opacity="0" offset="1"/>
        </linearGradient>
        <rect width="1" height="1" fill="url(#a)"/>
    </mask>
</svg>


=== textFade ===

<svg xmlns="http://www.w3.org/2000/svg">
    <mask id="fade-mask" maskContentUnits="objectBoundingBox">
        <linearGradient id="g">
            <stop stop-color="#fff" offset=".7"/>
            <stop stop-color="#fff" stop-opacity="0" offset="1"/>
        </linearGradient>
        <rect width="1" height="1" fill="url(#g)"/>
    </mask>
</svg>

*/