JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<div class="container">

			<hr class="line">

	        <!-- Projects Row -->
	        <div class="row">
	            <div class="col-md-4 portfolio-item">
	                <a href="#">
	                    <img class="img-responsive" src="images/1.jpg" alt="">
	                </a>
	                <h4>
	                    <a href="#">Заголовок</a>
	                </h4>
	                <p class="test">Короткое описание содержимого альбома</p>
	            </div>
	            <div class="col-md-4 portfolio-item">
	                <a href="#">
	                    <img class="img-responsive" src="images/1.jpg" alt="">
	                </a>
	                <h4>
	                    <a href="#">Заголовок</a>
	                </h4>
	                <p class="test">Короткое описание содержимого альбома</p>
	            </div>
	            <div class="col-md-4 portfolio-item">
	                <a href="#">
	                    <img class="img-responsive" src="images/1.jpg" alt="">
	                </a>
	                <h4>
	                    <a href="#">Заголовок</a>
	                </h4>
	                <p class="test">Длинное описание будет просто сокращаться вот так вот. Длинное описание будет просто сокращаться вот так вот. Длинное описание будет просто сокращаться вот так вот</p>
	            </div>
	            <div class="col-md-4 portfolio-item">
	                <a href="#">
	                    <img class="img-responsive" src="images/1.jpg" alt="">
	                </a>
	                <h4>
	                    <a href="#">Заголовок</a>
	                </h4>
	                <p class="test">Для свадебного фотографа нет ничего более приятного, чем молодожены полностью разделяющие его взгляды на концепцию и стиль свадебной фотосессии.</p>
	            </div>
	            <div class="col-md-4 portfolio-item">
	                <a href="#">
	          ...

JavaScript

function maxSymbols ($elem, num, fadeLength) {
    var text = $elem.text(),
        temp = text.split(''),
        step,
        fade,
        result;
    
    if (!fadeLength) {
        fadeLength = 10;
    }
    
    fade = temp.slice(num - fadeLength, num);
    temp.length = num - fadeLength;
    
    result = temp.join('');
    
    for (var i = 0; i < fadeLength; i++) {
        step = +(1 - (1 / fadeLength * i)).toFixed(2);
        result += '<span style="opacity: ' + step + '">' + fade[i] + '</span>';
    }
    
    $elem.html(result);
}

$('.test').each(function () {
    maxSymbols($(this), 200, 20);
});