W означає висячі рядки і розриви
Термін висяча рядок описує самотнє слово в кінці параграфа або заголовка.
Такі слова з'являються, коли останнє слово в рядку перестрибує на нову, бо воно не вмістилося по ширині.
Набагато краще візуально мати хоча б два слова на останньому рядку. Люди часто не хочуть залишати на рядку по одному слову. Агентство, на яке я працював, підходило до цього питання настільки педантично, що у мене з'явилося нав'язливе бажання перевірити ще раз не стільки текст, скільки заголовки на відсутність висячих рядків.
Нижче я навів кілька порад з видалення висячих рядків і про те, як працювати з розривами рядків.
Намагайтеся не використовувати тег br для примусового розриву рядка
За допомогою HTML тега ми можемо примусово поставити розрив рядка і перенести текст на новий рядок.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
На широких екранах такий заголовок може виглядати красиво, але якщо відкрити сторінку на маленькому екрані, розрив рядка може виявитися в незручно місці, що зіпсує заголовок. Наприклад:
Таке могло статися, якби ширини рядка вистачило тільки на «Це довгий заголовок, який». Слово «повинен» тоді перестрибнула б на новий рядок самостійно, після чого був би поставлений примусовий розрив, який перемістив б частину «перейти на новий рядок в цьому місці» на новий рядок. Не дуже приємно.
Не використовуйте тег br як відступів
Дуже часто я бачу, як це роблять студенти. Вони тільки навчилися працювати з HTML і хочуть відсунути якісь елементи один від одного. Додають більше відступів зверху заголовків, більше простору між секціями або параграфами і т.д.
За допомогою тегів br можна додати порожніх рядків, які будуть заміняти відступи, однак відступи завжди повинні виставлятися в CSS. Властивість margin дасть вам набагато більше можливостей, ніж br. HTML призначений для контенту, не для стилів.
Коли можна використовувати теги br?
Чи суперечить це моєму твердженням, що не можна використовувати розриви рядків для стилів? Можливо.
Ховайте розриви рядків за допомогою display: none
Тег br непомітний (він всього лише переводить рядок). У нього немає ніяких візуальний характеристик: його не видно, у нього немає розміру і форми, кольору або чого-небудь ще.
Але до розриву рядка можна додати клас, щоб контролювати переведення на новий рядок за допомогою властивості display.
Якщо задати display: none, розрив рядка зникне. А якщо поставити display: block, розрив з'явиться. Іноді може бути корисно в парі з медіа запитами для додавання і видалення розривів рядків на певних екранах.
Код вище прибирає розрив в тексті для маленьких екранів, а на великих екранах розрив з'являється, і текст копірайту перебудовується на два рядки.
використовуйте для гнучкого видалення висячих рядків
Давайте повернемося до того, з чого почали цю статтю. Якщо для примусового розриву рядка використовувати тег
не можна, тоді що можна?
Більш гнучкий спосіб - з'єднати два слова в нерозривний символ. Тоді текст буде красиво виглядати. Візьмемо розмітку нижче:
Між словами «рядок» і «тут» я додав нерозривному пробіл, через що два слова поводяться, як одне ціле.
Якщо екран широкий, заголовок вміщується на одному рядку, і все виглядає добре.
Якщо ширина екрану зменшується, то найближчою точкою розриву стає місце між словом «нову» і рядком «рядок тут». Тобто якщо місця недостатньо, буде вставлений розрив рядка, який перемістить два останніх слова на другий рядок. Ніяких висячих рядків, все виглядає добре.
Хочете спробувати цю техніку в дії? Відкрийте панель розробника в вашому браузері і проінспектуйте заголовки цієї сторінки. Можете зменшити ширину вікна, щоб подивитися, як поведуть себе слова в кожному із заголовків.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
