CSS от А до Я: работа с висячими строками и разрывами

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов о том, как использовать разрывы строк и стараться не допускать появления висячих строк.

W значит висячие строки и разрывы

Термин висячая строка описывает одинокое слово в конце параграфа или заголовка.

Такие слова появляются, когда последнее слово в строке перепрыгивает на новую, потому что оно не вместилось по ширине.
Намного лучше визуально иметь хотя бы два слова на последней строке. Люди зачастую не хотят оставлять на строке по одному слову. Агентство, на которое я работал, подходило к этому вопросу настолько педантично, что у меня появилось навязчивое желание проверить еще раз не столько текст, сколько заголовки на отсутствие висячих строк.

Ниже я привел пару советов по удалению висячих строк и о том, как работать с разрывами строк.

Старайтесь не использовать тег br для принудительного разрыва строки

С помощью HTML тега мы можем принудительно поставить разрыв строки и перенести текст на новую строку.

На широких экранах такой заголовок может смотреться красиво, но если открыть страницу на маленьком экране, разрыв строки может оказаться в неудобно месте, что испортит заголовок. К примеру:

Такое могло случиться, если бы ширины строки хватило только на «Это длинный заголовок, который». Слово «должен» тогда перепрыгнуло бы на новую строку самостоятельно, после чего был бы поставлен принудительный разрыв, который переместил бы часть «перейти на новую строку в этом месте» на новую строку. Не очень приятно.

Не используйте тег br в качестве отступов

Очень часто я вижу, как это делают студенты. Они только научились работать с HTML и хотят отодвинуть какие-то элементы друг от друга. Добавляют больше отступов сверху заголовков, больше пространства между секциями или параграфами и т.д.

С помощью тегов br можно добавить пустых строк, которые будут заменять отступы, однако отступы всегда должны выставляться в CSS. Свойство margin даст вам намного больше возможностей, чем br. HTML предназначен для контента, не для стилей.

Когда можно использовать теги br?

Вообще говоря, я стараюсь по максимуму отказаться от br. Я использую разрывы строк только, когда пишу стихи. Хотя тут лучше подойдет тег pre, с помощью которого можно сохранить все разрывы и отступы. Также я использую разрывы строк во время разметки почтовых адресов. Еще я использую разрывы в футерах в копирайте.

Противоречит ли это моему утверждению, что нельзя использовать разрывы строк для стилей? Возможно.

Прячьте разрывы строк с помощью display: none

Тег br незаметный (он всего лишь переводит строку). У него нет никаких визуальный характеристик: он не виден, у него нет размера и формы, цвета или чего-либо еще.

Но к разрыву строки можно добавить класс, чтобы контролировать перевод на новую строку с помощью свойства display.
Если задать display: none, разрыв строки исчезнет. А если задать display: block, разрыв появится. Иногда может быть полезно в паре с медиа запросами для добавления и удаления разрывов строк на определенных экранах.

Код выше убирает разрыв в тексте для маленьких экранов, а на больших экранах разрыв появляется, и текст копирайта перестраивается на две строки.

Используйте   для гибкого удаления висячих строк

Давайте вернемся к тому, с чего начали эту статью. Если для принудительного разрыва строки использовать тег
нельзя, тогда что можно?

Более гибкий способ – соединить два слова в неразрывный символ. Тогда текст будет красиво смотреться. Возьмем разметку ниже:

Между словами «строку» и «здесь» я добавил неразрывной пробел, из-за чего два слова ведут себя, как одно целое.
Если экран широкий, заголовок умещается на одной строке, и все смотрится хорошо.

Если ширина экрана уменьшается, то ближайшей точкой разрыва становится место между словом «новую» и строкой «строку здесь». То есть если места недостаточно, будет вставлен разрыв строки, который переместит два последних слова на вторую строку. Никаких висячих строк, все смотрится хорошо.

Хотите попробовать эту технику в действии? Откройте панель разработчика в вашем браузере и проинспектируйте заголовки этой страницы. Можете уменьшить ширину окна, чтобы посмотреть, как поведут себя слова в каждом из заголовков.

Автор: Guy Routledge

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: