🇺🇦 overflow CLIP vs HIDDEN. Перенос довгих рядків на новий рядок, та як поставити трикрапку на CSS?

Зроби цей світ краще 👇 👇 👇
🇺🇦 Фонд Притули – https://prytulafoundation.org/
🇺🇦 Стерненко – https://www.youtube.com/@STERNENKO

👻 На розвиток каналу Frontend Shinobi
БАНКА – https://send.monobank.ua/jar/5tEodxQoEu
Крипта – USDT 0x284eF2F4db8B27905d68bBBECBC95a119259A395

Посиланнячка:
https://caniuse.com/css-line-clamp
https://caniuse.com/?search=overflow-wrap
https://developer.chrome.com/blog/css-text-wrap-pretty
https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
https://css-tricks.com/almanac/properties/l/line-clamp/
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
https://codepen.io/bookamba/pen/jENqNMv

00:22 – overflow visible
00:00:33 – overflow hidden
00:01:30 – overflow scroll
00:01:45 – overflow auto
00:01:55 – overflow-y
02:00- overflow-x
00:02:20 – overflow clip
00:02:45 – overflow-clip-margin
00:05:00 – overflow-clip-margin border-box
00:05:30 – overflow-clip-margin padding-box
00:05:50 – overflow-clip-margin content-box
00:06:33 – can i use overflow-clip-margin
00:07:00 – overflow-anchor auto
00:07:50 – overflow-anchor none
00:08:55 – word-wrap break-word
00:08:55 – overflow-wrap break-word
00:10:20 – overflow-wrap anywhere
00:11:00 – overflow-wrap anywhere та min-content
00:12:00 – word-break break-all
00:13:00 – word-break break-word
00:13:20 – hyphens auto
00:14:15 – text-overflow ellipsis та white-space nowrap – трикрапка вкінці рядка
00:15:30 – text-overflow ellipsis та line-clamp – трикрапка в кінці другого(енного) рядку
00:17:20 – text-wrap pretty або text-wrap balance

Опис відео роліка:
🇺🇦 У цьому відео ви дізнаєтеся все про CSS-властивості, які впливають на обтікання, обрізання, розриви тексту та поведінку контенту у контейнерах. Ми розглянемо всі значення для overflow, а також додаткові властивості, які допоможуть вам краще контролювати текст і контент на вебсторінках.

🌟 Теми, які ми охопимо:

Як працюють overflow: visible, hidden, scroll, auto і clip.
Налаштування overflow-x та overflow-y для горизонтального та вертикального скролу.
Що таке overflow-clip-margin і як працюють значення border-box, padding-box та content-box.
Використання overflow-anchor для стабільності скролу.
Як керувати перенесенням тексту: word-wrap, overflow-wrap та word-break.
Використання hyphens для автоматичних дефісів у словах.
Як зробити трикрапку в кінці рядка за допомогою text-overflow: ellipsis і white-space: nowrap.
Розкриємо секрет line-clamp для створення трикрапки в багаторядкових текстах.
Що таке text-wrap: pretty та text-wrap: balance і як ці властивості допомагають зберегти читабельність тексту.

#css #html #js #курсиCSS #урокиCSS #CSS #CSSOverflow #CSSProperties #WebDevelopment #FrontEnd #WebDesign #ResponsiveDesign #CSSOverflowClip #CSSOverflowWrap #CSSWordWrap #CSSWordBreak #CSSTextOverflow #CSSTricks #CSSTutorial #CSSTips #LineClamp #CSSHyphens #OverflowAnchor #WebDevTips #LearnCSS #webcoding
#CSS #CSSВластивості #ВебРозробка #ВебДизайн #Фронтенд #CSSПоради #CSSПереповнення #CSSТекст #ТрикрапкаCSS #CSSLineClamp #CSSWordWrap #CSSWordBreak #CSSHyphens #OverflowAnchor #CSSТуторіал #НавчанняCSS #РеспонсивнийДизайн #ПорадиВебРозробника #CSSУкраїнською