text-overflow в CSS и зачем оно используется?text-overflow управляет тем, как обрезается текст, выходящий за пределы блока. Оно работает вместе с overflow: hidden и white-space: nowrap, чтобы отображать, например, троеточие.<div class="truncate">Очень длинный текст, который не помещается</div>
<style>
.truncate {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #ccc;
}
</style>
...), не выходя за рамки блока. Это удобно для заголовков, превью и адаптивных карточек в UI.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Неизвестно полезный CSS
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Здесь собраны фишки CSS, которые пригодятся каждому. Что-то, возможно, вы уже знаете, но наверняка тут найдётся для вас что-то новенькое.
В этой подборке про вертикальный текст, clip-path, контрастность текста и не только.
Кстати, это уже 6 подборка советов, остальные вы найдёте в конце статьи.
CodeBase | Frontend | #CSS
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Здесь собраны фишки CSS, которые пригодятся каждому. Что-то, возможно, вы уже знаете, но наверняка тут найдётся для вас что-то новенькое.
В этой подборке про вертикальный текст, clip-path, контрастность текста и не только.
Кстати, это уже 6 подборка советов, остальные вы найдёте в конце статьи.
CodeBase | Frontend | #CSS
👍6❤2🔥2
Свойство
flex-grow определяет, как свободное пространство внутри контейнера делится между дочерними элементами. Оно задаёт коэффициент роста: чем больше значение, тем больше элемент занимает места.
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
<style>
.container {
display: flex;
width: 300px;
border: 1px solid #ccc;
}
.item {
padding: 10px;
color: white;
}
.item1 { flex-grow: 1; background: #007bff; }
.item2 { flex-grow: 2; background: #28a745; }
.item3 { flex-grow: 1; background: #dc3545; }
</style>
CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤3✍1