Line break in HTML with '\n'
Is there a way to make HTML properly treat \n line breaks? Or do I have to replace them with <br/> ?
11 Answers 11
This is to show new line and return carriage in HTML. Then you don’t need to do it explicitly. You can do it in CSS by setting the white-space attribute pre-line value.
You can use CSS white-space property for \n . You can also preserve the tabs as in \t .
For line break \n :
For line break \n and tabs \t :
It can be done various ways.
For example, if you want to insert a new line in a text area, you can use these:
line feed and carriage return, used like this:
You can also use <pre>—</pre> preformatted text like this:
Or you can use a <p>—-</p> paragraph tag like this:
You could use the <pre> tag
Using white-space: pre-line allows you to input the text directly in the HTML with line breaks without having to use \n
If you use the innerText property of the element via JavaScript on a non-pre element e.g. a <div> , the \n values will be replaced with <br> in the DOM by default
- innerText : replaces \n with <br>
- innerHTML , textContent : require the use of styling white-space
It depends on how your applying the text, but there are a number of options
You can use <pre> tag:
Simple and linear:
You can use any of the following CSS,
You can use this CSS property:
A simple and more natural solution that doesn’t involve CSS styles or numeric character references like would be to use the 
 character entity reference:
Note: Since this is defined simply as the LF (line feed, or the U+000A Unicode code point) character, it can be debatable whether it suits scenarios where the entire CR + LF (carriage return + line feed) sequence is required. But then, it worked in my Chrome, Edge and WebView2 tests done in Windows 10, so it should be safe to use.
Перенос строки html.
В этом уроке мы:
1. Узнаем как сделать чтобы html код был для нас более удобен и легко читаем.
2. Разберем как правильно делать перенос текстовой строки.
Делаем html код удобным.
Сейчас наш код понятен и легко читаем, так как в нем мало текста и практически нет тегов. Когда мы создадим более сложную страницу, то там будет много тегов, соответственно найти нужный будет сложно.
Чтобы не было каши из тегов, нужно изначально расставлять теги и строки так, чтобы они визуально воспринимались легче. Когда браузер считывает информацию с html страницы, ему без разницы сколько пробелов и сколько пустых строк в коде.
Я изменил текст в коде страницы относительно той, которую мы создавали, но это не важно. На левом и на правом рисунке изображен один и тот же код. Оба варианта будут отображаться браузером на экране монитора абсолютно одинаково. Согласитесь, работать с кодом изображенным справа будет гораздо легче, чем с тем, что слева.
Рассматриваемый нами код очень простой, но даже сейчас заметна разница в визуальном восприятии. Каких-либо определенных правил «наведения порядка» нет, каждый мастер сам решает как ему удобнее работать.
Перенос строки html. Тег <br>.
Обратите внимание на рисунок. В первом варианте текст написан в одну строку, во втором варианте в две строки.
Браузер будет отображать оба варианта одинаково. Текст будет написан в одну строку:
Вы спросите, почему так? Ведь в одном из кодов часть текста перенесена на другую строку. Было бы логично если бы в браузере часть текста тоже перенеслась на другую строку, но у html своя логика в этом отношении. Если мы в html коде делаем перенос строки, то для браузера это равнозначно одному пробелу (как обычный пробел между словами в тексте). Если мы перенесем часть текста не на одну строку вниз, а на 2 или 3 (любое количество), то браузер все равно будет считать это расстояние за один обычный пробел между словами и при выводе на экран текст будет писаться в одну строку.
Тег <br>
Когда мы в третьем уроке знакомились с тегами, я упомянул, что бывают теги которые не требуют закрытия. Тег <br> один из них, служит он для переноса строки.
Давайте применим его в коде:
Мы вставили тег <br> в наш html код и теперь при запуске файла через браузер часть текста будет перенесена на следующую стоку.
* Не забываем сохранять изменения в Notepad (Ctrl + S) и обнавлять страницу в браузере (F5).
HTML :: Теги <br>, <wbr> и <hr>
Иногда при выводе текста на экран возникает необходимость перевода текста на новую строку в строго определенном месте. Для этого в HTML применяется одиночный тег <br> (от англ. break – перенос строки), который формирует пустой элемент разметки и переводит текст на новую строку именно в том месте, в котором он находится. При этом элемент «br» сохраняет расстояние между строками и не добавляет дополнительного вертикального отступа, как в случае с блочными элементами (см. пример №1 ). Браузеры, кстати, считают его строчным элементом.
Мягкий перенос строки и тег <wbr>
В отличие от элемента «br» , мягкий перенос строки «wbr» , формирующийся одиночным тегом <wbr> (от англ. word break opportunity – удобный случай для переноса слова), осуществляет разрыв строки только тогда, когда этого требует ширина родительского элемента. В противном случае перенос строки не происходит. Таким образом, элемент «br» указывает браузеру, где делать перенос, а элемент «wbr» – где допускается делать перенос.
В IE элемент «wbr» срабатывает только, если в стилях «CSS» , применяемых к тегам <wbr> , указано свойство «display: inline-block» .
Горизонтальная линия и тег <hr>
Для визуального и логического отделения одних блоков текста от других, например, абзацев, можно воспользоваться элементом «hr» . Он формируется одиночным тегом <hr> (от англ. horizontal rule – горизонтальная линейка) и рисует обычную горизонтальную линию. Элемент является пустым, но браузерами отображается как блочный элемент. Поэтому содержимое, которое следует после элемента, переносится на новую строку (см. пример №1 ).
Пример №1. Использование элементов «br», «wbr» и «hr»
При отображении примера в браузере хорошо видно, что горизонтальная линия заполняет всю доступную ширину, поскольку отображается браузером как блочный элемент.
Перенос текста с помощью CSS и HTML
Сегодня расскажу про HTML и CSS перенос текста. Очень часто возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.
Перенос текса на следующую строку
Для переноса текста можно использовать специальный html тег <br />. Это одиночный тег, то есть его не нужно закрывать, и ставится он в том месте, где вам нужно осуществить перенос на следующую строку.
Вот что получим:
Как сделать CSS перенос слова на следующую строку?
Осуществить перенос слова можно при помощи CSS свойства word-break.
У данного CSS свойства может быть несколько значений:
-
Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы.
Например:
Выглядит не очень! Не правда ли ?!
Вот что получится:
Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:
А вот CSS код для переноса текста, который записывается в файл стилей вашего шаблона или страницы сайта:
Всё бы ничего, но вот только переносы расставляются без знака «-» в конце строки и не по правилам.
Перенос слов в тексте вручную
Если текста не очень много и критически важно чтобы всё переносилось по правилам, то перенос слов в тексте можно осуществить при помощи специального символа
­
Этот специальный символ ставится в том месте, где нужно осуществить перенос.
Например:
Выглядеть это будет так:
Перенос слов в тексте при помощи свойства hyphens
Данное CSS свойства сравнительно новое и не очень хорошо поддерживается более старыми версиями браузеров. Однако, несмотря на это, оно наилучшим образом осуществляет перенос слов и текста, так как основывается на встроенном словаре браузера и автоматически проставляет знак «-» в конце строки.
СSS код блока с текстом в этом случае выглядит так:
Вот результат его использования данного CSS свойства:
В коде это будет выглядеть так:
Как видите перенос текста можно осуществлять несколькими способами как средствами CSS так и HTML.
Надеюсь что данная статья была для вас полезной! Если у вас возникнут какие-то вопросы – пишите их в комментариях. Подписывайтесь на обновления блога и до встречи в следующих статьях!
Читайте также:
Подписаться на рассылку
3 комментария
Фигня это, word-wrap:break-word и делов то
Скажите, пожалуйста, а как элемент перенести на новую строку? У меня в форме заказа круглые кнопки для выбора региона размещены перед фразой «доставка Почтой», а нужно сделать или после фразы или с новой строки
Здравствуйте! Скорее всего, Вам нужно вычислить класс или идентификатор элемента, внутри которого находится надпись «доставка Почтой», а затем для этого элемента в CSS задать display:block; если не поможет, то добавить ещё width: 100%.
.block <
display:block;
width: 100%;
>
Только вместо .block будет Ваш класс или идентификатор.
О том как определить класс и идентификатор написано здесь «Как определить ID и класс элемента на странице?»