8.1 Властивість text-overflow
Обтікання тексту і керування його відображенням є важливими аспектами веб-дизайну, особливо при роботі з довгими рядками тексту або обмеженими за розміром контейнерами. Властивості text-overflow, white-space і word-wrap (нині відоме як overflow-wrap) дозволяють контролювати, як текст поводиться у таких ситуаціях.
Властивість text-overflow керує тим, як відображається текст, який виходить за межі контейнера. Вона використовується у поєднанні з властивостями white-space і overflow для створення ефекту обрізання тексту і додавання трикрапки.
Значення:
clip: обрізає текст, який виходить за межі контейнераellipsis: додає трикрапку (...) в кінці обрізаного тексту
Приклад використання:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
<body>
<div class="container clip">Цей текст буде обрізаний за межами контейнера.</div>
<div class="container ellipsis">Цей текст буде обрізаний і замінений на трикрапку.</div>
</body>
8.2 Властивість white-space
Властивість white-space керує обробкою пробільних символів і перенесенням тексту. Вона дозволяє задавати, як пробіли, табуляції і нові рядки обробляються у тексті.
Значення:
normal: пробіли і переноси рядків обробляються нормально (за замовчуванням)nowrap: текст відображається в одному рядку, без переносівpre: пробіли і переноси рядків зберігаються, як у HTML-тезі<pre>pre-wrap: пробіли і переноси рядків зберігаються, але текст може переноситися на новий рядок за потребиpre-line: переноси рядків зберігаються, але пробіли обробляються як зазвичайbreak-spaces: пробіли і переноси рядків зберігаються, і довгі пробіли можуть викликати перенесення рядків
Приклад використання:
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
<body>
<div class="normal">Цей текст буде перенесений на наступний рядок, якщо не вистачатиме місця.</div>
<div class="nowrap">Цей текст не буде перенесений на наступний рядок і відображатиметься в одному рядку.</div>
<div class="pre">
Цей текст збереже
всі пробіли і переноси рядків.
</div>
<div class="pre-wrap">
Цей текст буде перенесений на наступний рядок, але також збереже
всі пробіли і переноси рядків.
</div>
</body>
8.3 Властивість overflow-wrap
Властивість overflow-wrap (раніше відоме як word-wrap) керує перенесенням слів, які виходять за межі контейнера. Вона дозволяє запобігти переповненню контейнера довгими словами, які не можуть бути розділені на частини.
Значення
normal: перенесення слів здійснюється згідно стандартних правил перенесенняbreak-word: перенесення слів здійснюється, навіть якщо для цього потрібно розірвати слово на частини
Приклад використання:
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
<body>
<div class="container normal">Цей текст буде перенесений на наступний рядок, якщо не вистачатиме місця.</div>
<div class="container break-word">ЦеДужеДовгеСловоНЕпереноситьсяпереноситьсянаНаступнийРядокЯкщоНеВистачатимеМісця.</div>
</body>
Пояснення коду:
overflow-wrap: normal;: перенесення слів здійснюється за стандартними правилами, без розриву слівoverflow-wrap: break-word;: довгі слова будуть розриватися і переноситися на наступний рядок за необхідності
8.4 Спільне використання властивостей
Властивості text-overflow, white-space і word-wrap часто використовуються разом для досягнення бажаного ефекту відображення тексту в обмежених за розміром контейнерах.
Приклад використання:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
<body>
<div class="container">Цей текст буде обрізаний і замінений на трикрапку, якщо не вистачатиме місця в контейнері.</div>
</body>
Пояснення коду:
white-space: nowrap;: текст відображається в одному рядку, без переносуoverflow: hidden;: приховує текст, що виходить за межі контейнераtext-overflow: ellipsis;: додає трикрапку в кінці обрізаного текстуoverflow-wrap: break-word;: переносить довгі слова, якщо не вистачає місця
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ