Жесткий разрыв строки html – Как сделать разрыв строки по пробелам в тексте, а не посреди слова? — Хабр Q&A

Как сделать новую строчку в html. Разрыв строки в HTML: используем тег br.

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

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

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

Для переноса текста на новую строку служит элемент BR , он не требует закрывающего тега, однако рекомендуется записывать его открывающий тег как br /> .

При использовании элемента BR пустая строка после переноса не добавляется.

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

Для этого применяют атрибут clear элемента BR .

Он может принимать следующие значения:

all – запрещает обтекание элемента с двух сторон.

left – запрещает обтекание с левой стороны плавающего объекта.

right – запрещает обтекание с правой стороны плавающего объекта.

none – отменяет свойство.

Если обтекание запрещено, то текст, следующий за элементом BR , будет отобра­жаться на строке после плавающего объекта

Ночь, улица, фонарь, аптека,
Бессмысленный и тусклый свет.
Живи ещё хоть четверть века —
Всё будет так. Исхода нет.

Умрёшь — начнёшь опять сначала
И повторится всё, как встарь:
Ночь, ледяная рябь канала,
Аптека, улица, фонарь.

Результат:

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

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

Зачем переносить «непереносимое»

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

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

Решаем проблему переноса слов с помощью HTML

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

• Использование символа мягкого разрыва — — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy , а после первой половины выводится знак переноса, похожий на дефис:

Пример сложного химического соединения и текста — метилпропенилендигидрок-сициннаменилакрилическая кислота

• Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте «разлома » знак переноса, что может негативно сказаться на читаемости всего текста:

В некоторых браузерах поддержка тега реализована некорректно. В них он будет работать, если для него в коде CSS прописано свойство display со значением inline-block.

Перенос слов средствами CSS

Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

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

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

• normal – слова не переносятся;
• break-word – автоматический перенос слов;
• inherit – наследование значения родителя.

Пример, иллюстрирующий применение этого свойства:

метилпропенилендигидроксициннаменилакрилическая кислота

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

Как видно на расположенном выше скриншоте, новое свойство подд

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

Иногда требуется «разорвать» текст, перенеся его остаток на новую строку, при этом не выделяя нового абзаца. Для этого используется тег разрыва строки <BR>.Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег<BR>не добавляет пустую строку. У этого тега нет парного закрывающего тега.

Пример

<HTML>

<HEAD>

<TITLE> Иосиф Бродский </TITLE>

</HEAD>

<BODY TEXT=black BGCOLOR=white>

Откуда к нам пришла зима, <BR>

не знаешь ты, никто не знает.

<P>

Умолкло все. Она сама <BR>

холодных губ не разжимает.

</BODY>

</HTML>

Некоторые браузеры интерпретируют несколько стоящих рядом тегов <BR>как один тег, поэтому не стоит использовать его для вставки пустых строк.

Бывают случаи, когда возникает надобность в операции противоположного назначения — запретить перевод строки. Текст, заключенный между тегами <NOBR> и </NOBR>, будет гарантированно располагаться в одной строке без переноса на другую.

Горизонтальные линии

Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Тег <HR>позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Атрибуты тега<HR>представлены в таблице.

Задания

1. Создайте документ с именем index.html, в заголовке которого поместите свои имя и фамилию и установите белый цвет фона.

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

1. Форматирование гипертекста

Язык HTML поддерживает как логический (logical), так и физический (physical) стили форматирования содержимого документа. Использование логического форматирования указывает на назначение данного фрагмента текста, а при физическом форматировании досконально задается его внешний вид. По возможности стоит использовать логические стили, так как они позволяют браузеру выбрать наиболее подходящий документу вид. Использование логических стилей также поможет читателю разобраться в структуре документа. Физический стиль используется в основном программами, конвертирующими текстовые файлы, содержащие физическое форматирование, в HTML, так как логическое форматирование документа невозможно выполнить автоматически.

Логическое форматирование

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

Говоря о логической разметке текста, можно выделить две основные части:

выделение заголовков в документе;

логическое выделение элементов текста.

Название документа, задаваемое с помощью тега <TITLE>, не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков:h2(заголовок первого уровня),Н2, Н3, h5, Н5иH6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня.

Если вы посмотрите на эту главу, то «Логическое форматирование» — заголовок третьего уровня, «Форматирование гипертекста» — второго, а «Основы языка HTML» — первого. На практике заголовки четвертого и далее уровней встречаются лишь в очень больших документах.

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

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

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

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

Для выделения длинных цитат из основного текста в HTML существует тег <BLOCKQUOTE>. Этот элемент является контейнером и может содержать любые форматирующие теги.

Современные браузеры реагируют на элемент <BLOCKQUOTE>смещением текста цитаты вправо. Некоторые текстовые программы просмотра обозначают цитату символами >, располагающимися в крайнем левом столбце экрана. Так как сегодня большинство браузеров являются графическими программами, элемент<BLOCKQUOTE>позволяет авторам внести в текст некоторое визуальное разнообразие.

HTML — Основные теги языка / ProgLang

Теги заголовка html-документа

Любой документ начинается с заголовка, который может быть разного размера. Существует шесть уровней заголовков в HTML: <h2>, <h3>, <h4>, <h5>, <h5> и <h6>. При отображении любого заголовка, браузер добавляет одну строку до и одну строку после этого заголовка.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример заголовков в HTML</title>
  </head>
  <body>
    <h2>Заголовок h2</h2>
    <h3>Заголовок h3</h3>
    <h4>Заголовок h4</h4>
    <h5>Заголовок h5</h5>
    <h5>Заголовок H5</h5>
    <h6>Заголовок H6</h6>
  </body>
</html>

Получим следующий результат:

Тег абзаца (параграфа)

HTML предлагает способ структурирования вашего текста в разные абзацы с помощью тега <p>. Каждый абзац текста должен находиться между открывающим <p> и закрывающим тегом </p>, как показано ниже в примере:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример абзацев в HTML</title>
  </head>
  <body>
    <p>Первый абзац текста</p>
    <p>Второй абзац текста</p>
    <p>Третий абзац текста</p>
  </body>
</html>

Получим следующий результат:

Тег разрыва строки

Всякий раз, когда Вы используете тег <br />, все последующее за ним элементы начинаются со следующей строки. Этот тег является примером пустого элемента, в котором Вам не нужны открывающие и закрывающие теги, так как между ним нет ничего.

Тег <br /> имеет пробел между символами br и косой чертой. Если Вы пропустите это пространство, то у старых браузеров возникнут проблемы с отображением разрыва строки, а если Вы пропустите символ косой черты и просто используйте тег <br>, то он будет недействителен в XHTML.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример разрыва строки в HTML</title>
  </head>
  <body>
    <p>Привет<br />
    Вы выполнили свое задание вовремя.<br />
    Спасибо</p>
  </body>
</html>

Получим следующий результат:

Центрирование содержимого

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример центрирования содержимого в HTML</title>
  </head>
  <body>
    <p>Текст не по центру.</p>
    <center>
      <p>Текст по центру.</p>
    </center>
  </body>
</html>

Получим следующий результат:

Тег горизонтальной линии в HTML

Горизонтальные линии используются для визуального разбиения разделов документа. Тег <hr> создает, из текущей позиции в документе, строку (горизонтальную линию) на правое поле и соответственно разбивает строку.

Например, Вы можете сделать горизонтальную линию между двумя параграфами, как в приведенном ниже примере:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример горизонтальной линии в HTML</title>
  </head>
  <body>
    <p>Первый абзац и он должен быть вверху.</p>
    <hr />
    <p>Второй абзац и он должен быть внизу.</p>
  </body>
</html>

Получим следующий результат:

Снова тег <hr /> является примером пустого элемента, где Вам не нужны открывающие и закрывающие теги, так как между ним нет ничего.

В HTML тег <hr /> имеет пробел между символами hr и косой чертой. Если Вы не поставите этот пробел, то у старых браузеров возникнут проблемы с отображением горизонтальной линии, а если Вы пропустите символ косой черты и просто используйте <hr>, то он будет недействителен в XHTML.

Сохранение форматирования

Иногда Вы хотите, чтобы ваш текст соответствовал точному формату того, как он написан в html-документе. В этих случаях Вы можете использовать тег <pre>.

Любой текст между открывающим тегом <pre> и закрывающим тегом </pre> сохранит форматирование исходного документа.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример сохранения форматирования в HTML</title>
  </head>
  <body>
    <pre>
      function testFunction( strText ){
        alert (strText)
      }
    </pre>
  </body>
</html>

Получим следующий результат:

Попробуйте использовать этот же код, не сохраняя его внутри тегов <pre>…</pre>.

Неразрывный пробел в HTML

Предположим, Вы хотите использовать фразу «Пираты Карибского моря: Мертвецы не рассказывают сказки». Здесь Вы не хотите, чтобы браузер разделил «Пираты», «Карибского», «моря:», «Мертвецы», «не», «рассказывают» и «сказки» на две строки:

В тех случаях, когда Вы не хотите, чтобы браузер клиента прерывал текст, Вы должны использовать в HTML неразрывный пробел &nbsp; вместо обычного пробела. Например, при написании фразы «Пираты Карибского моря: Мертвецы не рассказывают сказки» в коде абзаца Вы должны использовать что-то похожее на следующий код:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример неразрывного пробела в HTML</title>
  </head>
  <body>
    <p>Самый популярный кинофильм этой весны: «Пираты&nbsp;Карибского&nbsp;моря:&nbsp;Мертвецы&nbsp;не&nbsp;рассказывают&nbsp;сказки»</p>
  </body>
</html>

Получим следующий результат:

Поделитесь:

Как вставить разрыв строки | Как создать сайт

Как вставить разрыв строки

Проблема

Необходимость разрывать строки средствами CSS обычно возникает при использовании списков определений, но также в некоторых других случаях. Чаще всего мы используем списки определений, потому что хотим быть добропорядочными кибергражданами и создавать правильную семантическую разметку, даже если визуальный результат, который нам требуется, — это всего лишь несколько строк с парами из имени и значения. Рассмотрим такую разметку:
HTML
<dl>
<dt>Name:</dt>
<dd>Lea Verou</dd>
<dt>Email:</dt>
<dd>[email protected]<;/dd>
<dt>Location:</dt>
а<dd>Earth</dd>
</dl>
Ожидаемый визуальный результат — простая стилизация, показанная на рисунке.
На первом шаге мы чаще всего применяем пару простых приемов CSS, например:
dd {
margin: 0;
font-weight: bold;
}

Однако поскольку  <dt> и  <dd> — это блочные элементы, в результате у нас получается нечто более напоминающее рисунок ниже, когда каждое имя и каждое значение отображаются на отдельной строке.

Последующие попытки обычно включают тестирование разных значений свойства  display для элемента  <dt>, <dd> или обоих, вплоть до абсолютно произвольных, по мере того как мы приходим в полное отчаяние. Но результат при этом чаще всего оказывается похожим на рисунок ниже.

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

Решение

По сути нам нужно только добавить переносы строк в конце каждого  <dd> . Если мы ничего не имеем против презентационной разметки, то можно сделать это с помощью старых добрых элементов  <br> . Скажем, так:
HTML
<!— Каждый раз, когда вы делаете это, где-то умирает котенок —>
<dt>Name:</dt>
<dd>Lea Verou<br /></dd>
Затем мы применили бы  display:inline; ко всем  <dt> и  <dd> и заявили, что дело сделано. Разумеется, это не только плохая практика с точки зрения поддержки; при использовании данного подхода код несоразмерно раздувается. Если бы мы могли использовать генерируемое содержимое для добавления переносов строки, работающих аналогично элементам  <br> , это сразу решило бы нашу проблему! Но мы этого сделать не можем…

Или все же можем? В действительности существует символ Unicode, соответствующий  переносу строки:  0x000A . В CSS-коде мы должны записывать его как  «\000A» или, еще проще,  «\A» . Его можно использовать в качестве содержимого нашего псевдоэлемента  ::after , чтобы он автоматически добавлялся в конце каждого  <dd>, например так:
dd::after {
content: «\A»;
}
Вроде бы это должно сработать, но если мы попытаемся применить этот код, результат нас разочарует: по сравнению с рисунком выше ничего не изменится. Но это не означает, что мы идем по неверному пути, просто мы кое-что забыли. На самом деле то, что мы делаем с помощью этого CSS-кода, эквивалентно добавлению переносов строки в нашей HTML-разметке прямо перед закрывающимися тегами  </dd> .

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

Однако иногда пустое пространство и переносы строки нужно сохранять, как, например, в блоках с примерами кода. И что же мы обычно делаем в таких ситуациях? Мы применяем  white-space: pre; . То же самое можно сделать и в нашем примере, но только для генерируемых переносов строк.

Все, что у нас есть, — это один символ переноса строки, поэтому нас не особо волнует, сохранится пустое пространство или нет (оно все равно отсутствует). Следовательно, нам подойдет любое значение  pre (pre ,  pre-line ,  pre-wrap). Я рекомендую использовать  pre , так как оно поддерживается наибольшим количеством браузеров.  Давайте соберем все вместе:
dt, dd { display: inline; }
dd {
margin: 0;
font-weight: bold;
}
dd::after {
content: «\A»;
white-space: pre;
}
Протестировав этот код, вы увидите, что он действительно работает и обеспечивает результат. Но насколько это решение гибкое? Предположим, мы хотим добавить второй адрес электронной
почты к записям пользователей, которые содержатся в нашем списке определений:
HTML
…
<dt>Email:</dt>
<dd>[email protected]<;/dd>
<dd>[email protected]<;/dd>
…
Технически 0x000A соответствует символу Line Feed(Перевод строки»), который мы получаем в JavaScript, когда используем «\n». Есть также символ Carriage Return(Возврат каретки», «\r» в JS, «\D» в CSS), но в современных браузерах он не требуется.

Теперь результат выглядит, как показано на рисунке, и это действительно странно. Поскольку перенос строки добавляется после каждого  <dd> , каждое значение выводится на отдельной строке, даже если необходимости переносить его на новую строку нет. Было бы намного лучше, если бы множественные значения разделялись запятыми, но оставались на одной строке (при условии, что там достаточно места).
В идеальном случае нам хотелось бы выбирать только последние  <dd> перед <dt> и добавлять переносы строк только для них, но не для всех элементов  <dd>.

Однако в своем текущем состоянии селекторы CSS не обеспечивают такой точности, потому что не способны заглядывать вперед и проверять элементы после субъекта в DOM-дереве. Необходимо придумать другой способ. Одна из идей — попробовать добавлять переносы строк перед  <dt> , а не после  <dd> :
dt::before {
content: ‘\A’;
white-space: pre;
}
Однако это приводит к появлению пустой первой строки, поскольку селектор применяется также и к первому  <dt> . Для того чтобы справиться с этим, можно попытаться использовать любой из следующих селекторов вместо  dt:
dt:not(:first-child)
dt ~ dt
dd + dt
Мы выберем последний вариант, так как он будет работать, в том числе и в сценарии, когда для одного и того же значения определено несколько элементов <dt> , в отличие от первых двух селекторов, которые в таких условиях ломаются.

Также нам необходимо как-то разделять множественные элементы  <dd> , если использование в качестве разделителя обыкновенного пробела нас не удовлетворяет (это допустимо в одних случаях, но дает плохие результаты в других). В идеальной ситуации нам бы хотелось иметь возможность сказать браузеру:
«Добавляй запятую после каждого  <dd> , предшествующего другому  <dd> », но опять же, современные селекторы CSS не настолько хороши.

Таким образом, нам придется добавлять запятую перед каждым  <dd> , следующим за другим <dd> . Результирующий CSS-код представлен далее (а результат вы можете увидеть на рисунке):
dd + dt::before {
content: ‘\A’;
white-space: pre;
}
dd + dd::before {
content: ‘, ‘;
font-weight: normal;
}

Помните, что если ваша разметка включает (незакомментированное) пустое пространство между множественными последовательными элементами  <dd>, то перед запятой появится пробел. Есть несколько способов справиться с этим недостатком, но ни один из них не идеален. Например, поля отрицательного размера:
dd + dd::before {
content: ‘, ‘;
margin-left: -.25em;
font-weight: normal;
}
Это решение будет работать, но оно довольно хрупкое. В случае отображения содержимого на другом фоне и с другими метриками это пространство может оказаться шире или уже  0.25em , и тогда результат будет выглядеть странно. Однако с большинством шрифтов разница пренебрежимо мала.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/line-breaks

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

Также читайте

Разрыв строк. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Мы совсем забыли поместить на Web-страницы сведения об авторских правах их разработчика, т. е. о нас. Давайте сделаем это. Поместим их в самый низ Web- страниц посредством изученного в главе 2 тега <ADDRESS>:

<ADDRESS>Все права защищены. Читатели, 2010 год.</ADDRESS>

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

Можно, конечно, использовать два тега <ADDRESS>: один — для предупреждения, а другой — для имени разработчика. Но тогда строки будут разделены довольно большим расстоянием. (Вспомним — тег <ADDRESS> ведет себя как абзац, т. е. отделяется от соседних абзацев отступом.) А это будет выглядеть некрасиво.

Выход — добавить разрыв строк HTML. Он выполняет безусловный перевод строки, в которой он присутствует, в том месте, где проставлен. Разрыв строки определяется одиночным тегом <BR>:

<P>Этот абзац будет разорван на две строки в этом<BR>месте.</P>

Разрыв строки также относится к встроенным элементам Web-страницы.

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

<ADDRESS>Все права защищены.<BR>Читатели, 2010 год.</ADDRESS>

Откроем исправленную Web-страницу в Web-обозревателе и посмотрим на результат (рис. 3.1). Видно, что текст сведений об авторских правах разделен на строки в том самом месте, куда мы вставили тег <BR>.

Рис. 3.1. Абзац с разрывом строк

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

Следующая глава >