Як переміщати текст у HTML

HTML є основною мовою створення веб-сторінок, та його головним завданням є розмітка тексту та інших елементів, таких як фотографії, відео та гіперпосилання. Іноді веб-розробникам може знадобитися змінити розташування тексту в HTML, щоб зробити сторінку привабливішою для читача Наступні поради та інструкції допоможуть вам переміщати текст у HTML без будь-яких проблем.

Як змінити розташування тексту в HTML

Існує кілька способів вирівнювання тексту за допомогою HTML-коду:

1. За допомогою атрибута тега р: Щоб вирівняти текст по центру, необхідно додати атрибут, який визначає горизонтальне вирівнювання для тега р. Приклад: Текст по центру
2. Вирівнювання по центру за допомогою тега center: Застосування тега з текстом усередині допоможе перемістити текст до центру сторінки. Однак варто врахувати, що цей тег застарів і його використання не рекомендується.
3. Вирівнювання за допомогою блоків div: Для вирівнювання тексту за допомогою цього методу потрібно створити один або кілька блоків

Як перемістити текст у HTML вниз

Щоб перемістити текст вниз у HTML, необхідно додати властивості CSS, які визначають позицію елемента на сторінці. Як правило, використовуються такі властивості:

1. left: визначає відстань між лівою межею елемента та лівим краєм сторінки.
2. top: визначає відстань між верхньою межею елемента та верхньою частиною сторінки.
3. right: визначає відстань між правою межею елемента та правим краєм сторінки.
4. bottom: визначає відстань між нижньою межею елемента та нижньою частиною сторінки.

Приклад використання властивостей:

Текст, який зрушено вниз на 20 пікселів

Як перемістити текст до HTML

Для переміщення тексту догори, можна використовувати CSS властивість vertical-align . Воно визначає вертикальне вирівнювання елемента і може набувати значення пікселів, відсотків та інших доступних одиниць. Приклад використання:

Текст, який зрушено вгору

Як увімкнути перенесення слів HTML

Іноді, якщо текст не міститься в рядку через його довжину, веб-розробники можуть зіткнутися з проблемою обрізки тексту. Щоб уникнути цього і зробити сторінку більш користувальницькою, можна увімкнути перенесення слів. Це можна зробити за допомогою тега. У тих місцях, де за правилами російської допустимо перенесення, вставляємо . Приклад:

Довге слово, яке може не поміститися в одному рядку Слово продовження

Корисні поради та висновки

• Коли ви плануєте змінити розташування тексту на сторінціважливо стежити за її спільною естетикою та не перевантажувати сторінку інформацією, щоб не втомлювати читача
• При використанні CSS властивостей і HTML теги слід звертати увагу на їхню сумісність з усіма браузерами.
• Для досягнення цікавих ефектів на сторінці, можна використовувати кілька способів переміщення тексту на сторінці одночасно.
• Увімкнення перенесення слів може підвищити зручність читання текстуособливо якщо це допоможе уникнути обрізки слова другої половини на іншому рядку в редакторі.

На закінчення, ми сподіваємось, що цей посібник допоміг вам дізнатися про різні способи переміщення тексту в HTML. Застосування цих порад допоможе зробити вашу сторінку більш динамічною та привабливою для ваших користувачів. Не забувайте експериментувати і отримати максимальну користь від ваших веб-сторінок!

• Як дізнатися коли людина була в мережі в Телеграмі, якщо приховано
• Як змінити мову в грі Мобайл легенд
• Що буде якщо натиснути вивільнитися в Рафт
• Як правильно писати спочатку ім'я чи прізвище
• Чому Чарон блимає червоним без картриджа
• Чому рідина в Бруско темніє
• Як розблокувати Вейп Voopoo Gene
• Що означають букви LA на кепці
• Як зняти випарник на Аєгіс
• Скільки означає пів п'ятої
• Різне

У HTML існує кілька способів переміщення тексту на веб-сторінці. Один із них полягає у використанні тегів

для обрамлення тексту та завдання властивості text-align у CSS. За допомогою цієї властивості можна вирівняти текст по лівому, правому або центральному краю. Якщо потрібно додати відступи між текстом і межею елемента, можна використовувати властивості padding і margin. Також є інші способи переміщення тексту, наприклад, за допомогою властивості float, яка дозволяє вирівнювати текст лівим або правим краєм і переміщати його на певну відстань від інших елементів. Більш складні структури, такі як таблиці та списки, також мають власні властивості для переміщення і вирівнювання вмісту. Кожен із цих способів має свої переваги та недоліки, і вибір конкретного методу залежить від вимог веб-сторінки та переваг розробника.

© 2025. Всі права захищені.

Перенесення, обрізування та орієнтація тексту в CSS

white-space – це властивість, за допомогою якого можна вказати браузеру, як він повинен обробляти пробіли в тексті.

За промовчанням браузеру не важливо як відформатований текст усередині HTML-документа. У своїй роботі він спирається лише на теги. Перенесення рядків, які ми робимо за допомогою клавіші Enter, він замінює на прогалини. А кілька поспіль пробілів, що йдуть, виводить як один. Текст, який не міститься у рядок, переноситься на наступний. При цьому текст переноситься лише за символами пропуску.

Вихідний HTML-текст, що містить прогалини та переноси рядків:

Як він відображається у браузері:

Коли пробілів або тире у тексті немає, браузер його не переносить. У цьому випадку текст може вийти за межі елемента:

Також це переповнення може послужити тим, що елемент стане ширшим за сторінку і в неї з'явиться небажана горизонтальна прокрутка.

Це поведінка браузера за промовчанням чи іншими словами, коли властивість white-space має значення normal .

Але це можна змінити, якщо встановити white-space інші значення:

• nowrap – те саме що і normal , але без автоматичного перенесення тексту за символами пропуску (тобто розміщується в один рядок);
• pre – виводиться так, як зазначено в HTML-документі (тобто зберігаються прогалини та перенесення рядків з HTML, автоматичного перенесення тексту за пробілами немає);
• pre-wrap – схожий на pre , але текст при досягненні межі елемента буде автоматично переноситься на новий рядок;
• pre-line – схожий на pre-wrap, але тут кілька поспіль пробілів, що йдуть, замінюються на один;
• break-spaces – схожий на pre-wrap, але відрізняється від нього алгоритмом розбивки прогалин наприкінці рядка.

Установка white-space: nowrap виведе весь текст в один рядок:

Властивість white-space: pre відображає текст, оскільки він відформатований в HTML (виділення жовтим кольором зроблено для наочності):

Властивість white-space: pre-wrap на відміну від white-space: pre автоматично перенесе текст, який не міститься в рядку:

Властивість white-space: pre-line на відміну pre-wrap додатково ще замінює всі пробіли, що йдуть поспіль, на один:

Значення break-spaces робить те саме, що pre-wrap . Відрізняються вони лише тим, як виконується обробка прогалин кінці рядка. Щоб показати це більш наочно, ми спеціально додали багато прогалин між словами «це» і «властивість».

Таким чином, при pre-wrap (верхня частина картинки) вони залишаються біля рядка і просто переповнюють елемент. Значення break-spaces (нижня частина картинки) робить це інакше. Вона залишає в поточному рядку стільки пробілів, скільки можливо до переповнення, а решта переносить на наступний рядок.

Обрізання тексту (text-overflow)

CSS-властивість text-overflow призначена для завдання того, як повинен обрізатися текст, що виходить за межу елемента. Воно працює тільки в тому випадку, якщо елемент має властивості white-space: nowrap і overflow зі значенням hidden , scroll або auto .

Воно може набувати двох значень:

• clip (за замовчуванням) – обрізає текст межі елемента;
• ellipsis - обрізає текст і відображає в його кінці багатокрапка.

.item { white-space: nowrap; overflow: hidden; text-overflow: clip; /* просто з обрізанням */ text-overflow: ellipsis; /* з трьома крапками в кінці */ }

Перенесення слів при переповненні (overflow-wrap)

overflow-wrap – це CSS-властивість, яка дозволяє вказати чи потрібно переносити слова, що виходять за межі елемента. За замовчуванням overflow-wrap має значення normal . Це означає, що слова можуть розриватися тільки в певних місцях, наприклад, коли є пробіл або дефіс.

Два інших значення (break-word і anywhere) вказують браузеру, що він повинен вставляти розриви в рядок. При цьому розрив створюється тільки в тому випадку, якщо слово не може бути поміщене в окремий рядок без переповнення. У цьому випадку слово може бути розірвано на будь-якому символі, якщо в ній немає інших прийнятних точок розриву.

.item-1 { overflow-wrap: normal; } .item-2 { overflow-wrap: anywhere; } .item-3 { overflow-wrap: break-word; }

Браузер, коли нам необхідно, щоб контент займав мінімальну ширину (width: min-content), при встановленні overflow-wrap: anywhere може розставляти м'які переноси на свій розсуд:

.item-1 { width: min-content; overflow-wrap: anywhere; } .item-2 { width: min-content; overflow-wrap: break-word; }

Ще один цікавий приклад із текстом в анінімному flex-елементі:

🤦‍♂️Я забувся про властивість, яка дозволяє переносити слова, що виходять за межі елемента. 我忘記了允許您包裝超出元素邊界的單詞的屬性。
🤦‍♂️Я забувся про властивість, яка дозволяє переносити слова, що виходять за межі елемента. 我忘記了允許您包裝超出元素邊界的單詞的屬性。

Переповнення при overflow-wrap: break-word відбувається тому, що flex-елемент за умовчанням має мінімальну ширину значення auto , тобто min-width: auto . Так як стилізувати анонімний flex-елемент ми не можемо, то щоб виправити цю ситуацію, нам необхідно обернути текст в якийсь тег, наприклад, і встановити min-width: 0 :

🤦‍♂️Я забувся про властивість, яка дозволяє переносити слова, що виходять за межі елемента. 我忘記了允許您包裝超出元素邊界的單詞的屬性。

У CSS, крім overflow-wrap , є такі властивості: word-wrap і word-break .

Властивість word-wrap існувало до overflow-wrap. Воно було не офіційним, але підтримувалося на той час більшістю браузерів. Зараз цю властивість використовувати не рекомендується. Його має сенс використовувати тільки якщо потрібно забезпечити підтримку старих браузерів:

. el {word-wrap: break-word; overflow-wrap: break-word; }

Властивість word-break визначає, чи потрібно розривати слово при досягненні межі батьківського елемента. Ця властивість має такі значення:

• normal (за замовчуванням) – слова та рядки з нерозривною пробілом можуть розриватися лише у певних місцях, наприклад, коли є пробіл або дефіс;
• break-all - виконує розрив слова саме в тому місці, в якому відбувається переповнення, але тільки для тексту не китайською, японською та корейською мовами (CJK);
• keep-all – забороняє перенесення тексту китайською, японською або корейською мовами (CJK), іншими мовами аналогічно до значення normal ;
• break-word (застаріле, використовувати не рекомендується) - робить те саме, що і overflow-wrap: anywhere .

На практиці значення keep-all може використовуватися для корейської мови (у якій використовуються пробіли між словами), а також для тексту зі змішаним шрифтом, де фрагменти CJK поєднуються з іншою мовою, яка використовує пробіли для поділу. Значення break-all може застосовуватися для тексту, що переважно складається із символів CJK з короткими витримками, відмінними від CJK.

Для розриву рядків тексту китайською, японською та корейською мовами (CJK) є ще властивість line-break. Воно визначає строгість правил розриву рядків і має такі значення: auto (за замовчуванням), loose , normal , strict і anywhere . Ці властивості (word-break та line-break) відіграють важливу роль для текстів CJK.

Розміщення переносів (hyphens)

hyphens – це CSS-властивість, за допомогою якого ми можемо керувати розміщенням переносів через дефіс у словах, коли рядок переноситься на кілька рядків. За допомогою нього ми можемо заборонити розміщення переносів через дефіс, дозволити її або виконувати лише за наявності певних символів.

Зверніть увагу, що hyphens залежить від мови, яка в HTML визначається атрибутом lang . Браузер розставлятиме переноси лише в тому випадку, якщо атрибут lang присутній у HTML-документі і в ньому є відповідний цій мові словник для розміщення переносів.

Ця властивість має такі значення:

• none – заборонити розміщення переносів у словах через дефіс;
• manual (за замовчуванням) – слова переносяться через дефіс тільки в місцях, де проставлені символи ручного перенесення та ‐ ;
• auto – на розсуд браузера, тобто відповідно до символів ручного перенесення та правил на основі мови.

На практиці дуже приватна властивість hyphens використовується спільно з overflow-wrap. Розглянемо наступний приклад:

Я знаю властивість hyphens, яка дозволяє нам  
Я знаю властивість hyphens, яка дозволяє нам керувати розстановкою переносів через дефіс в словах, коли рядок переноситься на кілька рядків.
Я знаю властивість hyphens, яка дозволяє нам керувати розстановкою переносів через дефіс в словах, коли рядок переноситься на кілька рядків.

Тут за допомогою символу ми створили м'яке перенесення у слові керувати. Тепер браузер може орієнтуватися на вказане місце, якщо потрібно перенести це слово.

Символ ‐ створює жорсткий розрив рядка. У прикладі ми його зробили в слові переносів. Такий дефіс відображатиметься завжди, навіть якщо в цьому місці немає фактичного перенесення.

Режими листа (writing-mode)

Властивість writing-mode визначає:

• block flow direction, тобто напрямок потоку, в якому будуть складатися блоки всередині контейнера (це може бути зверху вниз, зліва направо або праворуч наліво);
• inline flow direction, тобто напрямок у якому контент (наприклад, літери та слова) будуть рухатися всередині рядків тексту, а також де буде починатися новий рядок (воно може бути горизонтальним або вертикальним).

Властивість writing-mode може приймати такі значення: horizontal-tb (значення за промовчанням), vertical-lr і vertical-rl .

Напрямок потоку в якому рухаються блоки:

• horizontal-tb - свеху вниз;
• vertical-lr - зліва направо;
• vertical-rl – праворуч наліво.

При цьому inline-напрямок залежить не тільки від writing-mode, але й якості direction. Тут потік рухається:

• зліва направо при writing-mode: horizontal-tb і direction: ltr;
• справа наліво при writing-mode: horizontal-tb і direction: rtl;
• зверху вниз при writing-mode: vertical-lr і direction: ltr;
• знизу вгору при writing-mode: vertical-rl та direction: rtl.

First paragraph
Second paragraph
Third paragraph
.

Орієнтація тексту (text-orientation)

CSS-властивість text-orientation дозволяє настроїти орієнтацію тексту всередині рядка. Його необхідно використовувати разом із writing-mode . Властивість text-orientation буде працювати тільки в тому випадку, якщо для writing-mode встановлено значення vertical-rl або vertical-lr.

Властивість writing-mode може приймати такі значення:

• mixed (за замовчуванням) – символи горизонтальних шрифтів будуть повернені на 90 градусів за годинниковою стрілкою, а вертикальні залишаться без змін;
• upright – символи відображаються у звичайному вигляді (без повороту), але розташовані один під одним (вертикально);
• sideways - символи розташовуються так, як вони розташовувалися б у горизонтальному режимі, але при повороті всього рядка на 90 ° за годинниковою стрілкою.

Цей абзац написано російською мовою.
이 단락은 일본어로 작성

Дослідження перенесення тексту та слів

Давайте поговоримо про різні способи керування перенесенням тексту на веб-сторінці.CSS дає безліч інструментів, що дозволяють зробити текст таким, яким ми хочемо його бачити. Також розглянемо трюки з використанням HTML та спеціальних символів.

Зміст

• Захищаючи макет
• Перенесення надто довгого тексту
• Розбиття слів без пощади
• Експресивна пунктуація
• Вказівка ​​місць, де слова можуть розбиватися
• Автоматичне перенесення слів
• Ручне перенесення слів
• Запобігання перенесенню тексту
• Попереднє форматування тексту
• Перенесення, де слова не можуть переноситися
• Нерозривні прогалини
• З'єднувачі слів та нерозривні дефіси
• CJK текст та перенесення слів
• CJK текст та правила перенесення рядків
• Варто згадати: Переповнення елементів
• Бонусний трюк: Псевдоелемент розрив рядка
• Бонусні нотатки
• Час підбивати підсумки

Захищаючи макет

Зазвичай текст переноситься на наступний рядок у "місцях можливого перенесення" - це химерна назва місць, де текст повинен розбиватися природним чином, наприклад, між словами або після дефісу. Але іноді можна зіткнутися з довгими фрагментами тексту, які не мають можливості м'якого перенесення, наприклад, дуже довгими словами або URL-адресами. Це може спричинити проблеми з версткою. Наприклад, текст може переповнити свій контейнер або він може стати занадто широким і зрушити все з місця.

Хорошим захисним кодуванням є передбачення проблем, пов'язаних з тим, що текст не розбивається. На щастя, CSS надає певні інструменти.

Перенесення надто довгого тексту

Застосування до елемента overflow-wrap: break-word дозволяє при необхідності розбивати текст на середині слова. Спочатку він спробує зберегти слово нерозривним, перемістивши його на наступний рядок, але потім розірве його, якщо місця все ще недостатньо.

Існує також overflow-wrap: anywhere , що розбиває слова так само.Різниця полягає в тому, як він впливає на розрахунок розміру min-content елемента, для якого він встановлений. Це помітно, коли ширина встановлена ​​на min-content .

.top


width: min-content;

overflow-wrap: break-word;

>



.bottom


width: min-content;

overflow-wrap: anywhere;

>

Елемент top з overflow-wrap: break-word обчислює min-content так, ніби жодне слово не розбите, тому його ширина стає шириною найдовшого слова. Елемент bottom з overflow-wrap: anywhere обчислює min-content з усіма розривами, які може створити. Оскільки розрив може статися будь-де, min-content стає рівним ширині одного символу.

Пам'ятайте, що така поведінка виявляється лише при використанні min-content . Якби ми встановили для width якесь жорстке значення, ми побачили б однаковий результат розбиття слів в обох випадках.

Розбиття слів без пощади

Ще один варіант розбиття слів - word-break: break-all. Цей варіант навіть намагається зберегти слова цілими — він розбиває їх негайно. Подивіться.

Зауважте, що довге слово не переноситься на наступний рядок, як це було б при використанні overflow . Також зверніть увагу, що слово "words" розбите, хоча воно чудово помістилося б на наступному рядку.

word-break: break-all без проблем розбиває слова, але все ж таки обережно ставиться до пунктуації. Наприклад, він не починатиме рядок з точки в кінці пропозиції. Якщо вам потрібний справді нещадний розрив, навіть із пунктуацією, використовуйте line-break: anywhere .

Бачите, як word-break: break-all переносить "k" вниз, щоб не починати другий рядок з "."? У той же час line-break: anywhere це не хвилює.

Експресивна пунктуація

Давайте подивимося, як розглянуті раніше CSS властивості справляються із надмірно довгими ділянками пунктуації.

overflow-wrap: break-word і line-break: anywhere здатні стримати ситуацію, але word-break: break-all знову дивно поводиться з пунктуацією — цього разу це призводить до переповнення тексту.

Це потрібно мати на увазі. Якщо ви категорично не хочете, щоб текст переповнювався, врахуйте, що word-break: break-all не зупинить пунктуацію.

Вказівка ​​місць, де слова можуть розбиватися

Для більшого контролю можна вручну вставити в текст можливості розриву слів за допомогою . Також можна використовувати "пробіл нульової ширини", HTML-сутність ​

Давайте подивимося на них у дії, перенісши довгий URL по сегментах, який зазвичай не переноситься.

p>https://subdomain.somewhere.co.ukp>



 -->

p>https://subdomainwbr>.somewherewbr>.cowbr>.ukp>






p>https://subdomain​.somewhere​.co​.ukp>

Автоматичне перенесення слів

Ви можете вказати браузеру розбивати і переносити слова там, де це необхідно, використовуючи hyphens: auto .

p
lang="en">Це є just bit of arbitrary text to show hyphenation in action.p>

p


-webkit-hyphens: auto;
/* для Safari */

hyphens: auto;

>

Ручне перенесення слів

Також можна взяти справу в свої руки і вставити "м'яке перенесення" вручну за допомогою HTML-сутності . але бачимо його лише один раз, коли текст переноситься.

p
lang="en">Magic?­dabra?­dabra!p>

Для правильного відображення дефісів необхідно встановити hyphens в auto або manual. Зручно, що за замовчуванням використовується значення hyphens: manual, так що можна обійтися без додаткового CSS (якщо тільки з якоїсь причини не оголосити hyphens: none).

Запобігання перенесенню тексту

Давайте змінимо ситуацію. Трапляються випадки, коли текст не повинен вільно переноситися, щоб можна було краще контролювати подання контенту. Є кілька інструментів, які допоможуть у цьому.

По-перше, це white-space: nowrap. Помістіть його на елемент, щоб запобігти зворотному перенесенню його тексту.

Попереднє форматування тексту

Також є white-space: pre, який перенесе текст так, як він надрукований у HTML. Однак будьте обережні, тому що при цьому зберігаються пробіли в HTML, тому слідкуйте за форматуванням. Крім того, можна використовувати тег, щоб отримати ті ж результати (за замовчуванням він містить white-space: pre).

p>

What's worse, ignorance or apathy?  
I don't know and I don't care.  
p>






p>What's worse, ignorance or apathy?  
I don't know and I don't care.p>



 -->

pre>What's worse, ignorance or apathy?  
I don't know and I don't care.pre>

p


white-space: pre;

>



pre


/* 
встановлює font-family: monospace, це можна скасувати */

font-family: inherit;

>
Перенесення, де слова не можуть переноситися
Для перенесення рядка можна використовувати  
всередині елемент з white-space: nowrap або white-space: pre . Текст буде перенесено.
Але що станеться, якщо використовувати у такому елементі? Питання з каверзою... тому що браузери не згодні. Chrome/Edge розпізнає та потенційно може перенести, а Firefox/Safari – ні.
Коли справа доходить до пробілу нульової ширини ( ​ ), браузери сходяться на думці. Жоден з них не перенесе текст із white-space: nowrap або white-space: pre .
p>Darth Vader: Nooooooooooooobr>oooo!p>



p>Darth Vader: Nooooooooooooowbr>oooo!p>



p>Darth Vader: Nooooooooooooo​oooo!p>
Нерозривні прогалини
Іноді потрібно, щоб текст переносився вільно, крім дуже специфічних місць. Хороші новини! Існує кілька спеціалізованих HTML-сутностей, що дозволяють зробити це.
Нерозривний пропуск ( ) часто використовується для того, щоб залишити пропуск між словами, але заборонити перенесення рядка між ними.
p>Одного разу I've noticed is designers don't seem to like orphans.p>



p>Something I've noticed is designers don't seem to like orphans.p>
З'єднувачі слів та нерозривні дефіси
Текст може природно переноситися навіть без пробілів, наприклад після дефісу. Щоб запобігти перенесенню без додавання пробілу, можна використовувати ⁠ (з урахуванням регістру!) для отримання "з'єднувача слів". Для дефісів можна використовувати - (у нього немає красивого імені HTML-сутності), щоб отримати "нерозривний дефіс".
p>Turn right here to get on I-85.p>



p>Turn right here to get on I-⁠85.p>



p>Turn right here to get on I‑85.p>
CJK текст та перенесення слів
CJK текст (Chinese/Japanese/Korean) у деяких випадках поводиться інакше, ніж текст не-CJK. Певні властивості та значення CSS можуть використовуватися для додаткового контролю над перенесенням тексту CJK.
Стандартна поведінка браузера дозволяє переносити слова у тексті CJK. Це означає, що word-break: normal (за замовчуванням) та word-break: break-all дадуть однакові результати. Однак ви можете використовувати word-break: keep-all , щоб запобігти перенесенню слів у тексті CJK (не CJK текст не буде торкнутися).
Ось приклад корейською мовою. Зверніть увагу, як слово "자란스럽게" переноситься чи не переноситься.
Однак будьте обережні: у китайській та японській мовах не використовуються пробіли між словами, як у корейській, тому word-break: keep-all може призвести до переповнення довгого тексту, якщо не вжити інших заходів.
CJK текст та правила перенесення рядків
Ми говорили про line-break: будь-де раніше з не-CJK текстом і, що він без проблем переносить розділові знаки. Те саме справедливо і для CJK тексту.
Ось приклад японською мовою. Зверніть увагу, як "." дозволяється чи не дозволяється починати рядок.
Існують інші значення для line-break , що впливають на перенесення тексту CJK: loose , normal і strict . Ці значення вказують браузеру, які правила використовувати для визначення місця розриву рядка. W3C описує кілька правил і браузери також можуть додавати свої власні правила.
Варто згадати: Переповнення елементів
CSS властивість overflow не стосується тексту, але часто використовується для того, щоб текст не виходив за межі елемента, ширина або висота якого обмежена.
.top


white-space: nowrap;

overflow: auto;

>



.bottom


white-space: nowrap;

overflow: hidden;

>
Як бачите, значення auto дозволяє прокручувати вміст (auto показує смуги прокручування тільки за потреби, scroll показує їх завжди). Значення hidden просто відсікає вміст і залишає його у такому вигляді.
overflow насправді є скороченням для встановлення overflow-x та overflow-y , для горизонтального та вертикального переповнення відповідно. Використовуйте те, що вам найбільше підходить.
Ми можемо розвинути принцип overflow: hidden , додавши text-overflow: ellipsis. Текст все одно буде обрізаний, але ми отримаємо красиву крапку як індикатор.
p


white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

>
Бонусний трюк: Псевдоелемент розрив рядка
Можна зробити примусове перенесення рядка перед та/або після вбудованого елемента, зберігши його як вбудований елемент за допомогою невеликого трюка з псевдоелементами.
Спочатку встановіть content псевдоелемента ::before або ::after в \A , що дасть вам символ нового рядка.
p>Things that go span>bumpspan> in the night.p>
span


background-color: #000;

>



span::before, span::after


content:
'\A';

white-space: pre;

>
Можна було б просто поставити display: block на , щоб отримати ті ж розриви, але тоді він вже не буде вбудованим. Колір фону дозволяє побачити, що при використанні цього методу у нас все ще є вбудований елемент.
Бонусні нотатки

Існує старе CSS властивість під назвою word-wrap .
У CSS властивості white-space є ще кілька значень, які ми не розглядали: pre-wrap , pre-line і break-spaces .
У специфікації CSS Text Module Level 4 описано CSS властивість text-wrap, яка виглядає цікаво, але на момент написання статті (у травні 2022 року) вона не реалізована. для кращого перенесення тексту.

Час підбивати підсумки
Є багато речей, пов'язаних з відображенням тексту на веб-сторінці. У більшості випадків не потрібно задумуватися про це, оскільки браузери все роблять самі.