Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Добро пожаловать в нашу следующую статью как часть нашей серии CSS AtoZ! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов просто недостаточно, в этой статье я добавил новый быстрый совет / урок об использовании разрывов строк и избегании вдов для вас.
W для вдов и разрывов строк
Вдова — это термин, используемый для описания одиночного слова в конце абзаца или заголовка.
Эти одинокие слова появляются, когда последнее слово в строке текста переносится на новую строку из-за недостатка доступной ширины.
Визуально приятнее иметь как минимум два слова в строке, и таких вдов часто считают нежелательными. Агентство, в котором я раньше работал, было настолько педантично к ним, что я немного приуныл, чтобы убедиться, что их нигде не видно — не столько в абзацах текста, сколько в заголовках, насколько это возможно.
Вот несколько советов по удалению вдов и работе с переносами строк.
Избегайте использования тегов <br> для разрыва строки.
Мы можем форсировать разрыв строки и обеспечивать перенос текста приятным способом, добавляя тег разрыва в HTML-документ.
<h1> This is a long title which should<br> wrap here </h1>
Это может выглядеть хорошо на широкоэкранном устройстве, но если экран узкий, разрыв строки может произойти в неправильной точке, в результате чего текст будет выглядеть испорченным. Например:
This is a long title which should wrap here
Это может произойти, если доступная ширина будет соответствовать только строке "This is a long title which" . Тогда слово «следует» будет переноситься естественным образом, и тогда принудительное <br> будет приводить к тому, что слово «перенос здесь» будет на своей линии.
Не очень хорошо.
Не используйте теги <br> для пробелов
Это то, что я вижу, что очень новые студенты делают много. Они только что выучили HTML и хотят начать отделять вещи друг от друга; больший интервал над заголовками, больший интервал между разделами или абзацами и т. д.
Это можно сделать с помощью тегов <br> путем добавления пустых строк вручную, но интервал всегда должен обрабатываться CSS. Свойство margin дает вам гораздо больший контроль, чем добавление разрывов строк с помощью тегов <br> и HTML для контента, а не для стиля.
Когда я могу использовать теги?
Вообще говоря, я стараюсь избегать использования тегов <br> как можно больше.
Действительно, я использую только разрывы строк, когда размечаю стихи (хотя теги <pre> , вероятно, предпочтительнее, чтобы сохранить все разрывы строк и отступы). Другое место — при разметке почтовых адресов.
Я также использовал их в абзаце в нижнем колонтитуле сайта для быстрого и грязного подхода к добавлению информации об авторских правах.
<footer class="site-footer"> <p> Lovingly created by Guy Routledge<br> © 2016 All Rights Reserved </p> </footer>
Это нарушает мое правило о том, что нельзя использовать разрывы строк для стиля? Может быть. Я откажусь.
Скрыть разрывы строк с display:none
Тег <br> не имеет большого значения (кроме принудительного переноса строки) и не имеет никаких визуальных характеристик — вы их не видите, у них нет ни формы, ни размера, ни цвета, ни чего-либо подобного тот.
Однако вы можете добавить класс к одному и переключать его способность разбивать строки с помощью свойства display .
Настройка display:none не приведет к разрыву строки. Настройка display:block приведет к разрыву строки. Иногда это может быть полезно в сочетании с медиа-запросами для включения и выключения разбиения на экранах определенного размера.
.break-large { display: none; } @media screen and (min-width: 1000px) { .break-large { display: block; } }
Эти фрагменты позволят тексту течь одной строкой на устройствах с узким экраном, но для больших экранов разрыв будет виден, а текст, защищенный авторским правом, будет в две строки.
Используйте для гибкого удаления вдов
Возвращаясь к тому месту, где мы начали этот пост, если мы не должны использовать теги <br> для разрыва строки (и удаления уродливых слов вдовы), то что мы должны использовать?
Хорошее объединение двух последних слов в заголовке с неразрывным символом пробела является гораздо более гибким способом обеспечения текстовых потоков и переносов визуально приятным способом. Возьмите следующую разметку:
<h1> This is a long title which wraps here </h1>
Я добавил неразрывный пробел между словами «обертки» и «здесь», который заставляет их вести себя так, как если бы они были одним словом, а не двумя, разделенными пробелом.
Если экран широкий и в одной строке достаточно места для отображения всего заголовка, все выглядит хорошо.
Если ширина экрана уменьшается, первая доступная точка переноса находится между строкой «which» и строкой «wraps here». Это означает, что, если для заголовка не хватает места для одной строки, строка разбивается на две строки, оставляя последние два слова своими собственными. Нет вдов и все выглядит отлично.
Если вы хотите увидеть эту технику в действии, вы можете использовать инструменты разработчика вашего браузера для проверки заголовков на этой странице. Вы также можете попробовать изменить размер окна, чтобы увидеть, как разбиваются слова в каждом заголовке.