текст перекладу

Розуміння переповнення тексту в CSS та як з цим боротися

Якщо ви коли-небудь працювали над адаптивним веб-дизайном, то, ймовірно, стикалися з проблемою переповнення тексту — коли контент не правильно адаптується до зміни розміру контейнера. Коли ширина контейнера змінюється, особливо на вузьких екранах, текст всередині контейнера може вийти за межі або бути обрізаним. Але чому це відбувається і як можна це виправити?

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

Сценарій: Чому переповнюється текст?

Давайте поглянемо на простий приклад бічної панелі з текстом всередині:

.sidebar {  
 height: 100vh;  
 background-color: red;  
 border: 3px solid blue;  
 width: 10%;  
}

Тут ми задали .sidebar займати 10% від ширини екрану, а висота встановлена на 100vh, що означає, що вона буде займати всю висоту вікна перегляду. Ця бічна панель містить текст, але, коли вікно перегляду стає меншим, ви можете помітити, що текст починає виходити за межі контейнера. Чому так відбувається?

Чому переповнюється текст при зміні розміру контейнера?

Проблема виникає, коли ширина контейнера стає занадто маленькою, щоб вмістити текст всередині. Ось кілька основних причин цього:

1. Текст не обгортається автоматично в вузьких контейнерах: За замовчуванням текст всередині блочного елемента (як div) не змінює своє розташування в залежності від того, наскільки зменшується контейнер. Якщо контейнер стає занадто вузьким, текст може не обгорнутися, і вийде за межі контейнера.
2. Немає масштабування для тексту: CSS не масштабує текст автоматично, щоб він помістився в контейнер. Тому, якщо ви не застосуєте спеціальні правила (наприклад, використовуючи одиниці vw для розміру шрифту), розмір тексту залишається постійним, навіть якщо контейнер стає меншим. Це особливо проблемно, коли ширина контейнера сильно зменшується.
3. Відсутність обгортки для довгих слів: Іншою потенційною причиною переповнення є довгі слова або неперервні рядки (як URL-адреси) всередині тексту. Ці довгі слова можуть спричиняти переповнення, оскільки вони не мають природних точок розриву, і текст не може обгорнутися в контейнері.

Як виправити переповнення тексту

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

1. Дозволити обгортання тексту

За замовчуванням текст всередині контейнера буде обгортатися, коли досягне краю контейнера, якщо не застосовано правило white-space: nowrap;. Якщо ваш контейнер занадто вузький і текст починає переповнюватися, вам, можливо, потрібно явно вказати, що обгортання тексту дозволено.

.sidebar {  
 height: 100vh;  
 background-color: red;  
 border: 3px solid blue;  
 width: 10%;  
 white-space: normal; /* Забезпечує обгортання тексту при необхідності */  
}

За допомогою white-space: normal; текст буде розриватися і обгортатися на наступний рядок, якщо контейнер стане занадто вузьким для одного рядка.

2. Керування переповненням за допомогою властивості overflow

Якщо текст все ще переповнюється, і ви не хочете, щоб він виходив за межі контейнера, можна використовувати властивість overflow, щоб контролювати, що відбувається з переповненим текстом. Наприклад, можна приховати переповнення або додати прокрутку.

.sidebar {  
 height: 100vh;  
 background-color: red;  
 border: 3px solid blue;  
 width: 10%;  
 overflow: hidden; /* Приховує переповнений текст */  
}

Альтернативно, якщо ви хочете, щоб користувач міг прокручувати і читати вміст, можна використовувати overflow: auto; або overflow: scroll;.

3. Масштабувати текст в залежності від розміру контейнера

Щоб забезпечити масштабування або зменшення тексту в залежності від розміру контейнера, можна використовувати відносні одиниці, як-от vw (ширина вікна перегляду) для розміру шрифту.
текст перекладу
Це дозволяє тексту масштабуватися вгору і вниз в залежності від зміни розміру вікна перегляду.

.sidebar {  
 height: 100vh;  
 background-color: red;  
 border: 3px solid blue;  
 width: 10%;  
 font-size: 4vw; /* Масштабує текст залежно від ширини вікна перегляду */  
}

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

4. Розрив довгих слів за допомогою word-break

Якщо ваш текст містить довгі слова або URL-адреси, які можуть не розриватися природно, можна використовувати властивість word-break, щоб забезпечити правильний розрив довгих рядків і уникнути їх переповнення в контейнері.

.sidebar {  
 height: 100vh;  
 background-color: red;  
 border: 3px solid blue;  
 width: 10%;  
 word-break: break-word; /* Розриває довгі слова, щоб уникнути переповнення */  
}

Це правило забезпечує розрив довгих слів на наступний рядок, коли вони досягають краю контейнера, запобігаючи їх переповненню.

Повний приклад: поєднання обгортки, розриву слів та керування переповненням

Ось приклад, який поєднує кілька технік для запобігання переповненню тексту:

    Це довгий текст, який може переповнити контейнер, якщо він буде занадто вузьким, але з увімкненим обгортанням все має бути в порядку.    
       ```  

## Висновок

Переповнення тексту може бути складною проблемою, коли ви проектуєте адаптивні макети, особливо коли контейнери звужуються або розширюються. За замовчуванням текст не адаптується автоматично, щоб вмістити його в контейнер, що призводить до переповнення. Однак CSS надає кілька способів контролювати, як текст поводиться всередині контейнерів. Ви можете дозволити тексту обгортатися, розривати довгі слова, керувати переповненням або навіть масштабувати текст в залежності від розміру контейнера. Завдяки кільком простим властивостям CSS, ви можете бути впевнені, що ваш контент буде акуратно вписуватися в контейнер — незалежно від розміру вікна перегляду. Розуміння того, як ці властивості працюють разом, допоможе створювати більш гнучкі, адаптивні дизайни, які підлаштовуються під різні розміри екрану без неочікуваного переповнення тексту. Удачі в кодингу!



Перекладено з: [Handling Text Overflow Inside Containers for Responsive Designs in CSS](https://medium.com/@oumuamuaa/handling-text-overflow-inside-containers-for-responsive-designs-in-css-94c96b68ccf9)