Обрезаем длинный текст с красивым эффектом затухания
26 марта 2025 г.WebTaverna js, css, html
Обрезаем длинный текст с красивым эффектом затухания
Для начала, мы зададим тегу h1 overflow: hidden, чтобы текст обрезался и white-space: nowrap, чтобы он не переносился на новую строку.
А далее, чтобы создать сам эффект затухания, мы добавим поверх него псевдоэлемент и зададим ему линейный градиент слева направо
HTML разметка
<h1>Канал WebTaverna /> JavaScript</h1>CSS стили
h1 {
position: relative;
width: 220px;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
h1::after {
content: "";
position: absolute;
right: 0;
height: 100%;
width: 120px;
background-image: linear-gradient(to right, transparent, #fff);
}
👍- если было полезно | ➡️ WebTaverna