Перенос на новую строку html: Тег HTML перенос строки, разделитель строк HTML5

Содержание

Переносы слов | htmlbook.ru

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

Использование тега

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

Пример 1. Тег

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переносы</title>
  <style>
   .word { 
    width: 160px; 
    background: #f0f0f0;
    border: 1px solid #333;
    padding: 10px;
    font-size: 18px;
   }
  </style>
 </head>
 <body>
  <p>Один<wbr>надцатиклас<wbr>сница 
  Анжелика после окончания школы выбрала профессию 
  дело<wbr>произ<wbr>водитель<wbr>ницы.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Текст с переносами слов

Мягкий перенос

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

Пример 2. Мягкий перенос

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переносы</title>
  <style>
   .word { 
    width: 160px; 
    background: #f0f0f0;
    border: 1px solid #333;
    padding: 10px;
    font-size: 18px;
   }
  </style>
 </head>
 <body>
  <p>Один&shy;надцатиклас&shy;сница Анжелика 
  после окончания школы выбрала профессию 
  дело&shy;произ&shy;водитель&shy;ницы.</p>
 </body>
</html>

Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.

Рис. 2. Текст с переносами слов

Свойство word-break

Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break со значением break-all (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.

Пример 3. Применение word-break

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переносы</title>
  <style>
   .word { 
    width: 160px; 
    background: #f0f0f0;
    border: 1px solid #333;
    padding: 10px;
    font-size: 18px;
    word-break: break-all;
   }
  </style>
 </head>
 <body>
  <p>Одиннадцатиклассница Анжелика после окончания школы
  выбрала профессию делопроизводительницы.</p>
 </body>
</html>

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

Рис. 3. Текст с переносами слов

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

Свойство hyphens

И, наконец, самое мощное и удобное свойство для автоматического добавления переносов — hyphens. Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега <html> добавляем атрибут lang со значением ru (пример 4).

Пример 4. Использование hyphens

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Переносы</title>
  <style>
   .word { 
    width: 160px; 
    background: #f0f0f0;
    border: 1px solid #333;
    padding: 10px;
    font-size: 18px;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
   }
  </style>
 </head>
 <body>
  <p>Одиннадцатиклассница Анжелика 
  после окончания школы выбрала профессию 
  делопроизводительницы.  </p>
 </body>
</html>

Результат данного примера показан на рис. 4.

Рис. 4. Текст с переносами слов

Запрет переносов

Нередко возникает и обратная задача — запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел   (пример 5).

Пример 5. Использование  

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переносы</title>
  <style>
   .word { 
    width: 160px; 
    background: #f0f0f0;
    border: 1px solid #333;
    padding: 10px;
    font-size: 18px;
   }
  </style>
 </head>
 <body>
  <p>Озеро по координатам
   70°&nbsp;58′&nbsp;19″&nbsp;с.&nbsp;ш. 
   97°&nbsp;24′&nbsp;5″&nbsp;в.&nbsp;д. 
   расположено в Таймырском Долгано-Ненецком 
   районе Красноярского края России.</p>
 </body>
</html>

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

текст

CSS по теме

hyphens
word-break

Статьи по теме

Переносы слов

Укрощаем длинный текст средствами HTML и CSS — Блог

Укрощаем длинный текст средствами HTML и CSS

8 января 2019 0 Александра Пирс

Перенос длинных слов

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

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

Немного иначе ведут себя flexbox элементы и таблицы, они игнорируют установленную ширину и всегда растягиваются настолько, чтобы вместить текст целиком. В примере ниже flex-контейнеру было задано ограничение по ширине (width: 300px;), однако видно, что в зависимости от контента блок может занимать больше места. Не самая приятная особенность для верстальщика, уверенного, что в его макете всё рассчитано до пикселя.

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

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

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

В HTML5 появился тег 

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

<html>
  <head>
    <style>
      .card {
        width: 200px;
        height: 250px;
        background: #7cd4ae;
        padding: 10px;
        display: inline-block;
        margin: 2em;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="troll.jpg">
      Двухсот&shy;восьмидесяти&shy;восьми&shy;киллограммовый тролль
    </div>
    <div>
      <img src="troll. jpg">
      Двухсот<wbr/>восьмидесяти<wbr/>восьми<wbr/>киллограммовый тролль
    </div>
  </body>
</html>

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

В CSS есть несколько свойств, влияющих на перенос текста.

overflow-wrap (word-wrap) — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-word — принудительно переносить).
word-break — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-all — принудительно переносить, keep-all — не переносить, даже если слово содержит дефис).
hyphens — автоматический перенос слов, основанный на встроенном в браузер словаре переносов (none — не переносить, auto — переносить длинные слова).

Название word-wrap является устаревшим, но сохраняется для совместимости со старыми версиями браузеров.

Свойства word-wrap и word-break на первый взгляд делают одно и то же, но есть небольшие отличия. Word-wrap считается более общим, тогда как word-break предусматривает специальное поведение для китайского, японского и корейского языков. Word-wrap начинает не поместившееся слово с новой строки, а word-break нет. Однако word-break является более приоритетным по отношению к word-wrap.

Свойство hyphens является наиболее мощным и удобным, но его поддержка браузерами пока не идеальна. Плюс оно требует обязательного указания языка в атрибуте lang тега (например, lang=»ru»).

<html>
  <head>
    <style>
      .description {
        width: 100px;
        background: #7cd4ae;
        word-wrap: break-word;
        word-break: break-all; /* более приоритетно */
      }
    </style>
  </head>
  <body>
    <div lang="ru">
      Верховный суд Лос-Анджелеса решит судьбу огромнейшего трёхсотвосьмидесятикилограммового изумруда
    </div>
  </body>
</html>

Что нужно и что нельзя делать при добавлении разрыва строки HTML

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

Давайте подробнее рассмотрим этот HTML-элемент и способы его использования ниже.

Что такое разрыв строки в HTML?

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

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

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

См. раздел Pen Paragraph vs Line Break Element от Christina Perricone (@hubspot) на CodePen.

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

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

Как сделать разрыв строки в HTML

Чтобы сделать разрыв строки в HTML, используйте тег
. Просто поместите тег там, где вы хотите принудительно разорвать строку. Поскольку разрыв строки HTML — это пустой элемент, закрывающий тег отсутствует.

Ниже приведен HTML-файл с элементами

и
.

Поскольку элемент
чаще всего используется для отображения стихов или адресов, давайте рассмотрим пример. Скажем, я хочу отобразить на веб-странице «kitchenette building» Гвендолин Брукс.

В этом случае я бы заключил строфы в теги

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

Вот HTML:

кухонное здание

Мы вещи сухих часов и невольного плана,

Серые и серые. "Мечта" звучит головокружительно, но не сильно

Как "рента", "кормление жены", "удовлетворение мужчины".

Но может ли мечта подняться через луковый пар

Оно бело-фиолетовое, с жареной картошкой борюсь

И вчерашний мусор, созревающий в зале,

Вихрь, или пой арию по этим комнатам

Даже если бы мы были готовы его впустить,

Успели его согреть, содержать в чистоте,

Предвидеть сообщение, дать ему начаться?

Мы удивляться. Но не хорошо! ни на минуту!

Поскольку Номер Пять сейчас не в ванной,

Мы думаем о теплой воде, надеемся попасть в нее.

-Гвендолин Брукс

Вот результат:

См. Pen Poem with line break element Кристины Перриконе (@hubspot) на CodePen.

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

Разрыв строки HTML не работает

Если разрыв строки HTML не работает, особенно если вы работаете в текстовом редакторе CMS, такой как WordPress, возможно, вы неправильно используете элемент.

Наиболее распространенное неправильное использование HTML-тега новой строки — его использование в целях презентации. Практически для всего, что связано с макетом, вместо этого вы должны использовать CSS.

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

Почему? Две причины.

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

Например, я хочу показать отрывок из пьесы Дрянь: Священное Писание . Я должен использовать элемент блочной кавычки, который автоматически добавит поля слева и справа от текста. Если бы я использовал тег
для имитации отступа элемента блочной кавычки, я бы неправильно использовал HTML-тег новой строки.

Вот правильный HTML:

 
  
  
 Любовь ужасна! Это ужасно. Это больно. Это пугает, заставляет сомневаться в себе, осуждать себя, дистанцироваться от других людей в своей жизни. Делает тебя эгоистом. Делает вас жутким. Это делает тебя одержимой своими волосами. Делает тебя жестоким. Заставляет вас говорить и делать то, о чем вы никогда не думали...
 
 
 
 —СВЯЩЕННИК, Дрянь: Писание

Вот результат:

См. Pen YzZpaRG Кристины Перриконе (@hubspot ) на CodePen.

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

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

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

Вот неправильный HTML:

 
  
 Любовь ужасна! Это ужасно. Это больно. Это пугает, заставляет сомневаться в себе, осуждать

 себя, дистанцироваться от других людей в своей жизни. Делает тебя эгоистом. Делает тебя жутким. 
 
 Это делает тебя одержимой своими волосами. Делает тебя жестоким. Заставляет вас говорить и делать то, чего вы никогда не делали
 
 думал, что вы подойдете. 
 
—СВЯЩЕННИК, Дрянь: Писание

Вот результат:

См. перо Неправильное использование элемента
для отображения отрывка из пьесы Кристина Перриконе (@hubspot) на CodePen.

Совет для профессионалов: Чтобы текст отображался или разрывался определенным образом, используйте семантически значимый элемент HTML или CSS вместо элемента разрыва строки, чтобы избежать проблем с макетом, таких как прерывистый текст и неровные края.

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

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

Чтобы узнать больше о том, как сделать свой веб-сайт доступным, ознакомьтесь с The Ultimate Guide to Web Accessibility.

Добавление разрывов строк в HTML

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

Чтобы узнать больше о создании веб-страниц, ознакомьтесь с бесплатными инструментами CMS HubSpot.

Примечание редактора: этот пост был первоначально опубликован в мае 2021 года и обновлен для полноты картины.

html — новая строка без тега

спросил 6 лет, 11 месяцев назад

Изменено 7 месяцев назад

Просмотрено 121 тысяч раз

Написание этого html:

 lorem ipsum
лорем ипсум
лорем ипсум

браузер показывает:

 lorem ipsumlorem ipsumlorem ipsum

Есть ли способ увидеть это:

 лорем ипсум
лорем ипсум
лорем ипсум

без использования тега в конце каждой строки и без использования textarea.

Мне это нужно, потому что у меня есть текст из 100 000 коротких строк, а написание тега 100 000 раз занимает много времени.

Вы можете использовать тег

 , чтобы сохранить разрывы строк. 
  <пред>
лорем ипсум
лорем ипсум
лорем ипсум

Стиль по умолчанию для тегов до — моноширинный шрифт, но его можно переопределить.

Вы можете добиться того же эффекта без какого-либо дополнительного форматирования по умолчанию, используя свойство CSS white-space: pre .

 <дел>
лорем ипсум
лорем ипсум
лорем ипсум

Существует несколько других значений для white-space , но вам следует обратиться к документации, чтобы выбрать наиболее подходящее.
Обратите внимание, что до будет обрабатывать каждый разрыв строки одинаково, включая тот, который следует за тегами
или
. Если они вам не нужны, вам нужно будет сделать:

lorem ipsum лорем ипсум ...
4
Html: Вы можете обернуть их в блочные элементы, такие как
или
Css: Вы можете использовать white-space: pre-wrap;
Js: вы можете использовать «заменить», чтобы изменить «\n» на
2
Я хотел бы предоставить некоторые дополнительные способы достижения цели OP. Тем не менее, прямым ответом на заголовок "новая строка без тега " будет
или пробел: предварительная обертка; , как указано выше.

Но,

Если мне нужно 100000 строки пустышки lorem ipsum , я бы предпочел использовать emmet (который встроен в VSCode) , чем писать что-либо самому. ({lorem ipsum }*100)*100

Или, если эти короткие строки 100000 представляют собой предопределенный текст , я могу найти и заменить ( Ctrl + ) на регулярное выражение включено, замените регулярное выражение $ ( endline ) на .

Чтобы исправить, добавьте пробел в стиле CSS: pre-wrap:

div { пробел: предварительная обертка; } <дел> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.

Да, правильный способ добавить точки останова — использовать пробел : pre в таблице стилей css. вот так

Наслаждайтесь любимыми видео и музыкой. Создайте свой собственный бизнес или развлекательный канал

В этом случае вы можете просто использовать (пробел: предварительно) в качестве стиля.

<голова> <мета-кодировка="UTF-8"> разрыв строки без использования тега <тело> <дел> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
No related posts.

Перенос на новую строку html: Тег HTML перенос строки, разделитель строк HTML5

Переносы слов | htmlbook.ru

Использование тега <wbr>

Мягкий перенос

Свойство word-break

Свойство hyphens

Запрет переносов

CSS по теме

Статьи по теме

Укрощаем длинный текст средствами HTML и CSS — Блог

Укрощаем длинный текст средствами HTML и CSS

Перенос длинных слов

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

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

Что нужно и что нельзя делать при добавлении разрыва строки HTML

Что такое разрыв строки в HTML?

Как сделать разрыв строки в HTML

кухонное здание

Разрыв строки HTML не работает

Добавление разрывов строк в HTML

html — новая строка без тега

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

Рубрики

Рубрики