Як додати з допомогою властивостей CSS перенесення рядка
Опубликованно 20.11.2018 09:15
При верстці веб-майстрів періодично виникає питання: як буде здійснюватися перенесення тексту? У більшості випадків браузер самостійно справляється з цим завданням. Але іноді цей процес доводиться брати під контроль, особливо оформляючи довгі слова і фрази, які при неправильному перенесенні втрачають сенс.
Властивість word-wrap
У HTML для розділення рядків існує спеціальний тег <br>. Але його занадто часте використання вважається серед розробників поганим тоном і часто свідчить про непрофесіоналізм. Як доказ, уявіть, що у вас є логотип і ви хочете, щоб кожна буква починалася з нового рядка:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Перевірка перенова слів</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <section id="logo-wrapper"> <p class="logo">Л<br><br>г<br><br>т<br><br>п</p> </section> </body> </html>
Вийшов громіздкий і потворний код, від якого у будь-якого розробника трапиться культурний шок. І як вчинити, якщо ви захочете, щоб в десктопної версії логотип розташовувався горизонтально, а при ширині екрану менше 550 пікселів вертикально? Тому для налаштування зовнішнього вигляду елементів завжди використовувати каскадні таблиці стилів. Тим більше за допомогою інструментів CSS перенесення рядка здійснюється більш елегантним способом. При цьому не виникає надмірної розмітки, яка тільки зменшує швидкість завантаження сторінок.
Перше властивість, до якого слід звернутися для обробки тексту, — це word-wrap. Приймає три значення: normal, break all і keep all. Вам знадобиться запам'ятати тільки break-all. Normal стоїть за умовчанням, і його немає сенсу вказувати. Keep all означає в документі CSS заборону перенесення рядка. Розроблено спеціально для китайських, японських і корейських ієрогліфів. Тому, якщо ви не збираєтеся вести блог на якомусь з цих мов, властивість вам не знадобиться. А також воно не підтримується браузером Safari і мобільними телефонами на базі iOS.
Щоб логотипу з попереднього прикладу призначити з допомогою CSS перенесення на новий рядок кожної букви, потрібно прописати наступний код:
p{ font: bold 30px Helvetica, sans-serif; width: 25px; word-wrap: break-all; }
Ширина і розмір шрифту підбирається таким чином, щоб місця вистачало тільки для однієї літери. Word-wrap зі значенням break-all повідомляє браузеру, що слово потрібно щоразу переносити на новий рядок. Незамінним це властивість назвати не можна. Але воно стане в нагоді при оформленні невеликих блоків з текстом, наприклад, полів для введення коментарів.
Властивість white-space
Поширена помилка початківців веб-розробників — намагатися редагувати текст пропусками або натисканнями клавіші Enter, а потім дивуватися, чому їх зусилля не видно на сторінці. Скільки б ви не натиснули "Enter", браузер це проігнорує. Але є спосіб змусити його відображати текст так, як потрібно вам, і беручи до уваги всі інтервали.
У документі CSS перенесення рядка, призначений за допомогою властивості white-space, можна налаштувати так, щоб він здійснювався з урахуванням пробілів або натискання клавіші "Enter". White-space зі значенням pre-line змусить браузер бачити в тексті Enter.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Перевірка перенова слів</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> body{ width: 100%; margin: 0; padding: 0; display: flex; justify-content: center; -ms-align-items: center; align-items: center; } #wrapper{ /*Елементу-контейнера необхідно обов'язково вказати ширину!*/ width: 60%; background: linear-gradient(to bottom, rgba(0,0,0,.1),rgba(0,0,0,.8)); } #wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: pre-line; } </style> </head> <body> <section id="wrapper"> <p class="text-to-wrap">Після кожного слова я натискаю клавішу "Введення". </p> </section> </body> </html>
Якщо поміняти pre-line на pre-wrap в коді CSS, перенесення рядка станеться з урахуванням пробілів. І навпаки, заборонити будь перенесення, присвоївши тексту властивість white-space зі значенням nowrap:
#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap; } Text-overflow
Ще один корисний інструмент для роботи з текстом — це text-overflow. Крім перенесення рядка, CSS властивість дозволяє обрізати контент, коли контейнер переповнений. Приймає два значення: clip — просто обрізає текст; ellipsis — додає три крапки.
#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis;/*Додаємо три крапки*/ white-space: nowrap; /* Забороняємо перенесення рядків */ overflow: hidden;/*Ховаємо все що виходить за межі контейнера*/ }
Щоб властивість працювало, елементу також необхідно призначити заборона на перенесення рядка і overflow зі значенням hidden. Автор: Чирченко Ася 19 Вересня 2018
Категория: Техника