При помощи CSS сейчас есть много различных вариантов по сокрытию элементов, где рассмотрим самый популярный, это плавноо урвть описание, что будем писать в блоке, но по своим значению оно просто не влезает. И здесь мы подключаем стилистику, которая плавно будет скрывать знаки, где все получится красиво и гармонично.
Вот так красиво получилось:
HTML
Код
<div class="skryvayem_tekst">
<div class="skryvayem_tekst-row">
<h3>Блок #1</h3>
<div class="skryvayem_tekst-text">
Некоторые технические проблемы могут привести к серьезным проблемам для SEO. Даже если вы правильно выбрали ключевые слова и даже если ваш контент великолепен, эти проблемы не позволят вам получить хороший рейтинг:
</div>
</div>
<div class="skryvayem_tekst-row">
<h3>Блок #2</h3>
<div class="skryvayem_tekst-text">
Например, будет сложно оценить «сантехник». Но вы легко сможете получить оценку за исправление переполнения раковины Дулут. Более того, последний дает вам гораздо больше шансов поймать бизнес.
</div>
</div>
<div class="skryvayem_tekst-row">
<h3>Блок #3</h3>
<div class="skryvayem_tekst-text">
Стремитесь к ключевым словам, которые имеют меньший объем поиска (и, следовательно, более низкую конкуренцию), но лучше ориентированы. Ключевые слова длинного хвоста - ваши лучшие друзья здесь.
</div>
</div>
</div>
CSS
Код
.skryvayem_tekst {
overflow: hidden;
}
.skryvayem_tekst-row {
margin: 15px;
width: 200px;
float: left;
}
.skryvayem_tekst-text {
height: 70px;
overflow: hidden;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(to bottom, #000, #000, rgba(0, 0, 0, 0));
}
На этом вся установка!
Демонстрация
