• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Плавно скрыть лишний текст в блоке на CSS (Очень плавно обрезаем длину текста на сайте или блоке)
Плавно скрыть лишний текст в блоке на CSS
Kosten
Понедельник, 18 Мая 2020 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
При помощи 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));
}

На этом вся установка!

Демонстрация
Прикрепления: 8185405.png (88.6 Kb) · hide-block.zip (3.1 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Плавно скрыть лишний текст в блоке на CSS (Очень плавно обрезаем длину текста на сайте или блоке)
  • Страница 1 из 1
  • 1
Поиск: