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


Содержание материала:

Разрыв строки в HTML: используем тег br

Во время форматирования текста часто возникает потребность добавить новый абзац, но без пустой строки, которую вставляет тег абзаца

. Кроме того, иногда нужно в точности сохранить форматирование предыдущего текста, которое тег

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

Для некоторых фрагментов текста принятые для абзацев стандартные интервалы просто неуместны. Это могут быть надписи под картинками и в таблицах, стихи, цитаты, сноски и примечания.

Для принудительного переноса строк предусмотрен специальный тег, функция которого заложена в его названии br (break row — «разорвать ряд, строку»). Тег
языка гипертекстовой разметки html означает, что все следующее за ним содержимое должно начинаться с новой строки. Если нужно, можно проставить несколько тегов подряд, чтобы добиться необходимого интервала.

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

Пример использования тега разрыва

Тег br в действии

Прогул на службе

Еще нигде и никогда

Я не был столь плохим

Начальства алчная орда

Грызет меня живым

Прогул на службе

Еще нигде и никогда
Я не был столь плохим.
Начальства алчная орда
Грызет меня живым.

Атрибут тега

Единственный атрибут, которым обладает html тег
, называется Clear («очистить»). Он указывает браузеру, как поступить с переносимой строкой, если тексту придется обтекать так называемый плавающий элемент, каковым может быть, например, изображение с атрибутом выравнивания align, использующим значения right/left, или блок в CSS, которому прописано свойство float.

В спецификациях по XHTML 1.0 / HTML 4.01 атрибут clear можно использовать только с Transitional, Frameset и , иначе код будет нерабочим.

Свойства атрибута тега

Эффект от применения атрибута clear зависит от его значения и расположения обтекаемого текстом плавающего элемента. Атрибут может принимать 4 значения:

Значение left запрещает обтекание элемента, выровненного по левому краю, поэтому текст, «споткнувшись» о тег
, расположится ниже изображения или иного плавающего элемента.

Точно такой результат получится от использования аргумента all, который ни за что не позволит тексту обтекать картинку ни справа, ни слева.

Значение right запрещает тексту обтекание элемента, выровненного по правому краю, поэтому после тега
тексту не останется ничего другого, как обойти изображение, обтекая его справа.

Значение none («ни вашим, ни нашим») вообще снимает все полномочия с атрибута clear, и тег
молча переносит строку вниз.

Значение по умолчанию, как таковое, у атрибута clear тега отсутствует.

Тег
— это мягкий перенос

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

Не следует слишком увлекаться тегом перевода строк для форматирования текста, потому что результаты его применения не всегда отличаются изяществом.

Например, если использовать тег
для перевода строк внутри абзаца, это может привести к появлению «гребенки» в окне пользователя, если оно меньше окна, на которое ориентировался веб-мастер.

Неразрывная строка

Предположим, у меня на странице есть какой-нибудь inline-элемент (ну, давайте для определённости ). В нём несколько слов текста.

Как сделать так, чтобы при уменьшении окна, текст внутри span ‘а не переносился по словам т.е. всегда оставался одной строкой?

P.S. Костыли вроде использования неразрывных пробелов не предлагать.

1 ответ 1

Всё ещё ищете ответ? Посмотрите другие вопросы с метками вёрстка html css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

Онлайн удаление разрыва строк

Онлайн-инструмент для удаления разрывов строк и абзацев текста. Вставьте свой текст, отформатируйте его и скопируйте себе.

Удаление разрыва строк

Вставьте текст в поле ниже и нажмите на кнопку.

Новый текст появится во втором поле страницы.

Удалить разрывы абзацев и строк

Удалить только разрывы строк (Абзацы сохранятся)

Новый текст без разрывов

Скопируйте новый текст без разрывов строк в поле ниже.

Скопировать в буфер обмена

Вы можете удалить разрывы строк из текста, но и сохранить разбиение на абзацы с помощью этого инструмента.

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

Топ-пост этого месяца:  Категории Хуков — Разное — WordPress

Вы также имеете возможность только удалить все разрывы строк из XML, PDF или какой-либо текст без сохранения разбиение на абзацы.

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

Форматирование HTML-абзаца

Форматирование HTML-абзаца с помощью стилей

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

в HTML позволяет задать абзацы, а атрибут align выравнивает их по левому краю, по правому краю, по центру или по ширине. Помимо них мы будем использовать глобальный атрибут style .

Выравнивание абзаца

Можно выровнять абзац, используя атрибут align со следующими значениями:

Скопируйте следующий код в файл .html .

В окне браузера HTML код абзаца выглядит следующим образом.

Интервалы между строками

Вы можете управлять междустрочным интервалом абзаца с помощью style=line-height . Используйте атрибут style со следующими значениями:

Ниже приведен пример HTML-кода , который выводит абзацы с различными междустрочными интервалами:

Ниже приведено несколько различных способов использования значения line-height для атрибута style :

: Устанавливает межстрочный интервал 13 пикселей;

: Устанавливает в HTML расстояние между абзацами в 200% относительно текущего размера шрифта;

: Устанавливает высоту строки 14 пикселей.

Отступы

Я использовал термин » отступы «, чтобы его было проще понять. Но в HTML мы используем промежутки, чтобы создать вокруг объекта пустое пространство. Можно использовать атрибут style со значением padding , чтобы задать для абзаца отступ слева или справа.

Ниже приводится пример абзацев с отступом слева и справа:

Отступы между абзацами (отступ перед и отступ после абзаца)

В HTML или CSS нам это не нужно. Мы можем просто указать стиль padding для элемента

. padding-top и padding-bottom задают пустое пространство до и после абзаца, которое работает, как отступ сверху или снизу. Посмотрите на приведенный ниже пример тега

. Я установил для первого абзаца HTML отступ 10 пикселей перед вторым и 50 пикселей после второго абзаца:

Что следует помнить

  • Абзац HTML может быть выровнен с помощью атрибута align или стиля text-align ;
  • HTML будет отображаться по-разному в зависимости от размеров экрана, размеров окна браузера;
  • Добавление дополнительных пробелов или пустых строк в HTML-код не влияет на вывод. Браузер удаляет все лишние пробелы;
  • Теги задают, что должно отображаться, а стили определяют, как это должно выводиться;
  • Стили могут быть заданы тремя различными способами — встроенные ( внутри тегов ), внутренние ( внутри того же HTML-файла с помощью элемента ) и внешние ( в отдельном файле );
  • Лучшей практикой при разработке веб-сайтов считается использование внешнего файла CSS . Таким образом, мы можем разделить контент и представление;
  • Style является глобальным атрибутом, поэтому его можно использовать с любыми другими элементами, а не только с элементом

;

  • Стиль text-align выравнивает абзац по левому краю, по центру, по правому краю или по ширине;
  • Междустрочный интервал для абзаца можно задать с помощью стиля line-height . Он может принимать различные значения;
  • Вы можете указать для line-height кратные значения ( 1 для одинарного междустрочного интервала, 1,5 для полуторного, 2 для двойного, 3 для тройного и так далее ), а также пиксели, проценты и т.д.;
  • Отступ для абзаца в HTML можно задать с помощью стиля padding-left или padding-right . Может принимать значения в пикселях, процентах и т.д.;
  • Интервалы между абзацами в HTML можно задать с помощью стилей padding-top или padding-bottom . Для этого также допустимы значения в пикселях, процентах и т.д.
  • Данная публикация представляет собой перевод статьи « HTML Paragraph Formatting » , подготовленной дружной командой проекта Интернет-технологии.ру

    Разрыв строки

    Есть два элемента, которые можно использовать для разрыва строк в контенте: это элементы br и wbr .

    Принудительный разрыв строки

    Элемент br устанавливает разрыв строки. Соглашение по стилям для данного элемента заключается в переходе последующего содержания на новую строку. В таблице 8-13 представлен элемент br .

    Таблица 8-13: Элемент br

    Элемент br
    Тип элемента Фразовый
    Разрешенные родительские элементы Любой элемент, который может содержать фразовый контент
    Локальные атрибуты Нет
    Содержание N/A
    Стиль тегов Тег пустого элемента
    Новый в HTML5 Нет
    Изменения в HTML5 Нет
    Соглашение по стилям Показать последующее содержание на новой строке (невозможно через CSS)

    В листинге 8-12 показано использование элемента br .

    Элемент br может быть использован только тогда, когда разрывы строк являются частью контента, как показано в листинге 8-12. Вы не должны использовать элемент br , чтобы создать параграфы или другие группы контента; для этой задачи есть существуют другие элементы, которые я описываю в главах 9 и 10.

    Листинг 8-12: Использование элемента br

    На рисунке 8-10 показано, как браузер отображает контент, если используется элемент br .

    Рисунок 8-10: Использование элемента br

    Указание возможности для безопасного разрыва строки

    Элемент wbr является новым в HTML5, и он указывает, где браузер мог бы разумно вставить разрыв строки, если контент больше, чем текущее окно браузера. Браузер сам принимает решение относительно того, актуален ли на данный момент разрыв строки. Элемент wbr просто показывает подходящие места, где можно сделать разрыв строки. В таблице 8-14 представлен элемент wbr .

    Таблица 8-14: Элемент wbr

    Элемент wbr
    Тип элемента Фразовый
    Разрешенные родительские элементы Любой элемент, который может содержать фразовый контент
    Локальные атрибуты Нет
    Содержание N/A
    Стиль тегов Тег пустого элемента (не требует закрывающего тега)
    Новый в HTML5 Да
    Изменения в HTML5 N/A
    Соглашение по стилям Показать последующее содержание на новой строке, если требуется перенос содержания

    В листинге 8-13 показано использование элемента wbr для того, чтобы помочь браузеру отобразить длинное слово.

    Листинг 8-13: Использование элемента wbr

    Чтобы понять значение элемента wbr , нужно посмотреть, как браузер работает, если этот элемент используется, и как браузер ведет себя, если этот элемент не используется. На рисунке 8-11 показано, как браузер обрабатывает содержание, если элемента wbr нет.

    Рисунок 8-11: Обработка контента без использования элемента wbr

    Без элемента wbr браузер сталкивается с длинным словом и рассматривает его как единое целое. Это означает, что вы в конечном итоге получите большое количество пустого места в конце первой строки текста. Если вы добавите элемент wbr , как показано в листинге 8-13, то вы дадите браузеру больше возможностей, как видно на рисунке 8-12.

    Рисунок 8-12: Обработка контента с использованием элемента wbr

    С элементом wbr браузер способен обработать очень длинное слово как ряд более мелких сегментов и может разместить содержание более элегантно. При использовании элемента wbr вы сообщаете браузеру, где перенос слова будет наиболее подходящим.

    Борьба с пробелами между блочно-строчными элементами

    24 сентября 2014

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

    Проблема вот в чём: между блочно-строчными элементами в браузере появляются пробелы, если вы форматируете HTML-код как обычно.

    Приведённый пример кода даст следующий результат:

    Это крайне нежелательное явление.

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

    Это не «баг» (по крайней мере, я не думаю, что это баг). Просто так работает принцип расположения элементов в строчку. Ведь вы же хотите, чтобы между словами, которые вы печатаете через пробел, этот пробел был? Пробелы между этими блоками — почти то же самое, что пробелы между словами. При этом я допускаю, что спецификацию можно усовершенствовать и прописать, что пробелов между блочно-строчными элементами быть не должно, но я уверен, что мало кто решится открыть этот ящик Пандоры.

    Вот некоторые способы борьбы с пробелами, чтобы заставить блочно-строчные элементы стоять вплотную друг к другу.

    Убрать пробелы

    Причина, по которой у вас получаются пробелы, в том, что у вас есть пробелы между элементами (на самом деле, перенос строки и знаки табуляции воспринимаются как пробел). Решить проблему поможет минимизированный HTML-код или любая из следующих хитростей:

    или с комментариями

    Это всё довольно хитрые способы, но они делают своё дело.

    Отрицательный внешний отступ

    Можно подвинуть элементы, чтобы они стояли, как нужно, используя внешний отступ c отрицательным значением −4px. (возможны вариации значения в зависимости от размера шрифта у родительских элементов). Этот способ может некорректно работать в старых версиях IE (6 и 7), но если вам плевать на отображение в этих браузерах, вы хотя бы сможете сохранить в чистоте форматирование кода.

    Не использовать закрывающий тег

    Для HTML5 так делать — в порядке вещей. Хотя, стоит признать, становится немного не по себе.

    Установить размер шрифта пробела, равный нулю

    Пробел, имеющий нулевой размер шрифта, равен. нулю.

    Мэтт Стоу сообщает, что метод использования font-size: 0; вызывает некоторые трудности на Андроиде. Цитата: «в версиях до Jellybean пробел не исчезает вообще, а в Jellybean есть баг, когда перед последним элементом иногда случайно возникает маленький пробел». Смотрите исследование.

    Кроме того, имейте в виду, если вы задаёте величины в em, то с использованием нулевого размера шрифта могут быть проблемы, поскольку при наследовании em-ов от ближайшего родителя все дочерние элементы будут также иметь размер шрифта 0. В этом случае вам помогут rem, или абсолютные (не относительные) единицы задания размера шрифта.

    Другая странность! Даг Стюарт показал мне, что если использовать @font-face с этой техникой, то в браузере Сафари версии 5.0 шрифты потеряют сглаживание.

    Пусть они лучше плавают!

    Может быть, им вообще необязательно быть блочно-строчными элементами, может, можно задать их расположение при помощи свойства float ? Это позволит вам задать им и ширину, и высоту, и внутренние отступы, и всё остальное. Но при этом вы не сможете выровнять их так же, как блочно-строчные элементы, используя свойство text-align: center; у родителя. Ну, вообще. вы в каком-то смысле сможете это сделать, но выглядит это очень странно.

    Используйте вместо этого flexbox

    Если вас устраивает список поддерживаемых браузеров, а также все, что вам нужно от блочно-строчных элементов — это их выравнивание по центру, вы вполне можете воспользоваться flexbox. Это не совсем замена блочно-строчным элементам, но вы сможете добиться от него того, чего хотите.

    Верстка книг. Висячие строки

    Правила верстки висячих строк в книгах

    Прежде всего давайте определимся, какие строки называются висячими? Это первая абзацная строка, которая находится в конце полосы и последняя строка абзаца, которая расположена в начале полосы. Наличие таких строк противоречит правилам, по которым должна делаться верстка книг. Почему? Потому что нарушается одно из главных правил: внешний вид полосы издания должен иметь прямоугольную форму. Наличие висячих строк также снижает удобочитаемость текста. По правилам полоса должна оканчиваться концевой строкой, а начинаться абзацной строкой. Если абзац состоит из одной строки, так бывает, когда он относится к прямой речи, то его можно располагаться в конце (начале) полосы. Полоса может начинаться короткими строками типа «здесь», «или», если они приводятся между математическими формулами.

    Если верстка книги получилась с висячими строками, то от них нужно избавиться с помощью приемов вгонки (выгонки). Больше о правильной верстке в книге колонтитулов и колонцифр можно прочитать в на этой странице.

    Приемы вгонки и выгонки строк при верстке книг

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

    Выгонка – это обратный процесс увеличения числа строк в абзаце с помощью увеличения пробелов между словами в следующих строках абзаца, в результате чего мы получаем новую концевую строку.

    Приемы вгонки (выгонки) применяют не только для ликвидации висячих строк, но и для уничтожения переноса между нечетной и четной полосами, т.к. такой перенос не допустим. Для того чтобы дочитать слово, читателю нужно перевернуть страницу, а это уменьшает удобочитаемость книги. Переносы с четной на нечетную полосу допустимы, т. к. они находятся на одном развороте.

    В конце полосы убрать висячую строку можно выгонкой одной (нескольких) строк в этой полосе и в результате абзацная строка перейдет на следующую полосу. Если в начале полосы есть висячая строка и от нее необходимо избавиться, то вгоняют строки в абзаце на предыдущей полосе и концевая строка переходит на эту полосу. Здесь можно прочитать о книжной верстке спусковых полос.

    Иногда верстка книги сделана так, что вогнать (выгнать) строку на нужной полосе не представляется возможным. В таком случае необходимо выполнить эту операцию на предыдущих полосах. При этом, возможно, придется переверстать одну или две полосы.

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

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

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

    Итак, начнем — по шагам от «всасывания» текста до конечного результата. В качестве иллюстрации привожу фрагмент текста, который я верстаю прямо сейчас. Там есть не все проблемы, на которые я хочу обратить ваше внимание, но тем не менее.

    Основные проблемы, с которыми мы здесь сталкиваемся:
    — повторные пробелы в тексте;
    — неверное использование знаков препинания, чаще всего — дефиса (-) вместо тире (—) и минуса (−), а также программистских кавычек («») вместо типографских («», „“, причем с «елочками» проблем обычно нет, а „лапки“ во многих шрифтах кривые, их надо проверять);
    — попадание тире в начало строки (за исключением прямой речи и ненумерованных списков);
    — неверное использование (или, чаще, неиспользование) пробела в сокращениях («и т.д.» вместо «и т. д.», «г.Москва» вместо «г. Москва», «А.С.Пушкин» и «Пушкин А.С.» вместо [ну, вы поняли]), с единицами измерениями («15км» вместо «15 км», но «20°С», «20%-ный» — без пробела).

    Со множественными пробелами можно бороться автомагически (заменяя два пробела на один до тех пор, пока сочетание символов «два пробела» не перестанет находиться в тексте), а вот все остальное придется править вручную. Для ввода неразрывных пробелов (которые должны использоваться в перечисленных выше случаях) можно пользоваться возможностями вашей любимой программы верстки, но я лично предпочитаю типографскую раскладку клавиатуры Ильи Бирмана (в которой, к слову, есть и многие другие спецсимволы).

    2. Оптическая компенсация.

    Здесь есть два «узких места»: границы колонок текста и кернинг.

    Первое (отмечено на иллюстрации) обычно удовлетворительно исправляется автомагически. Суть в том, что геометрически прямой край колонки в зависимости от формы приграничных символов при взгляде издали воспринимается искривленным, что некрасиво. Поэтому граница преднамеренно искажается, чтобы компенсировать этот эффект:

    Со вторым чуть сложнее. Не во всех шрифтах прописаны кернинговые пары (а в тех, в которых прописаны, случаются ошибки, или прописаны далеко не все встречающиеся на практике сочетания), поэтому я предпочитаю везде включать оптический кернинг. Если в каких-то местах это не помогает (что случается крайне редко) — правлю руками.

    3. Короткие «хвосты», «висячие» строки и первый абзац.

    Если на последней строке абзаца оказывается совсем мало текста, «дыра» выглядит некрасиво. Если, напротив, последняя строка заполнена [почти] до конца, следующий абзац плохо визуально отделяется от текущего. Обе проблемы обычно можно побороть, скорректировав трекинг. С помощью этого же инструмента можно «ужать» или «распушить» текст, чтобы в конце колонки не оставалась в одиночестве первая строка абзаца (или, наоборот, чтобы колонка не начиналась последней строкой абзаца, «приехавшей» из предыдущей части текста). Кроме того, в большинстве случаев эта техника позволяет «уносить» и более крупные объекты, например, заголовки.

    Первый абзац статьи, или первый абзац, следующий за подзаголовком, как правило, не стоит снабжать обычным отступом первой строки. У меня для таких случаев предусмотрен специальный стиль.

    Все эти манипуляции нелинейны, то есть одна может влиять на результат другой. Я обычно правлю все именно в приведенном порядке, поскольку так вероятность словить нежелательные спецэффекты минимальна.

    Если вам есть что добавить — пожалуйста, не стесняйтесь. Если захотите заказать мне какую-нибудь верстку — тоже ;-).

    Как вставить разрыв строки перед элементом с использованием CSS

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

    Но как вы это делаете?

    Возможно, с помощью \A escape-последовательности в созданном psuedo-элементе содержимом. Подробнее в спецификации CSS2.

    Вам также может потребоваться добавить white-space:pre; в #restart .

    Примечание: \A обозначает конец строки.

    p.s. Другое лечение —

    Если #restart является встроенным элементом (например, , и т.д.), вы можете превратить его в элемент блока, используя:

    Это приведет к тому, что разрыв строки будет как до, так и после элемента.

    Нет способа вставить CSS-вставку что-то, что действует как разрыв строки только перед элементом, а не после. Вы могли бы вызвать разрыв строки перед тем, как побочный эффект других изменений, например float: left или clear: left после плавающего элемента, или даже что-то сумасшедшее, как #restart:before < content: 'a load of non-breaking spaces'; >, но это, вероятно, не очень хорошая идея в общем случае.

    Добавить комментарий