Html перенос текста на новую строку: Перенос строки и разделительная линия в HTML — Разметка текста — codebra

Перенос строки и разделительная линия в HTML — Разметка текста — codebra

Перенос строки при помощи HTML или CSS

Перевод строки, перенос строки, перенос на новую строку – это все об одном. В языке HTML перенос на новую строку применяется часто. Есть несколько путей: использовать тег <br> для перевода на новую строку, а можно использовать свойства CSS для переноса строки. Рассмотрим пример использования тега переноса строки:

Код HTML

Здесь текст
<br>
Этот текст на новой строке

В CSS перенос строки можно осуществить по-разному, например вот так:

Код CSS

.br {
float: left;
width: 100%;
margin: 0 0 20px 0; /* отступ после строки 20 пикселей */
}

Код HTML

Здесь текст
<div class = "br"></div>
Этот текст на новой строке

Разделительная линия при помощи HTML или CSS

В HTML создать разделительную линию очень просто. Используется тоже непарный тег <hr> — это и есть разделительная линия. Разделительная линия начинается с новой строки и после нее есть отступ. Вы можете управлять стилем горизонтальной линии, а так же можно сделать альтернативу ей. Далее пример разделительной линии при помощи тега:

Код HTML

Здесь текст
<hr>
И здесь текст

А теперь давайте стилизуем (изменим стили, изменим внешний вид) нашу разделительную линию:

Код CSS

hr {
width: 80%; /* ширина линии */
height: 4px; /* высота / толщина линии */
background: #333; /* фон / цвет линии */
border: 0; /* рамка вокруг разделительной линии (уберем ее) */
margin: 5px 0 5px 0; /* отступ над и под линией 5 пикселей */
}

И создадим альтернативу нашей разделительной линии при помощи тега <div> и CSS:

Код CSS

.line {
width: 80%; /* ширина линии */
height: 4px; /* высота / толщина линии */
background: #333; /* фон / цвет линии */
border: 0; /* рамка вокруг разделительной линии (уберем ее) */
margin: 5px 0 5px 0; /* отступ над и под линией 5 пикселей */
}

Код HTML

Здесь текст
<div class = "line"></div>
Здесь текст

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+2.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

HTML
Текст<br> текст
XHTML
Текст<br /> текст

Атрибуты

clear
Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BR</title>
 </head>
 <body>

  <p>Р.Л. Стивенсон</p>
  <p>Лето в стране настало,<br>
   Вереск опять цветет.<br>
   Но некому готовить<br>
   Вересковый мед.</p>

 </body>
</html>

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

Рис. 1. Вид текста при использовании тега <br>

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

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

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

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

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

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

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

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

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

<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>

 

<h3>Перенос длинных слов</h3> <p>Проблема переноса длинных слов встречается не так редко, как может показаться. Если не брать во внимание слова-рекордсмены вроде “метилпропенилендигидроксициннаменилакрилической кислоты”, порой в установленные макетом страницы рамки не умещаются менее экзотические слова.</p> <p>Браузеры по умолчанию не разбивают длинные слова на несколько строк. Перенос на новую строку происходит только там, где стоит дефис, пробел или Enter (исключение составляют неразрывный пробел &amp;nbsp; и неразрывный дефис &amp;#8209;). При некоторых условиях может появиться ползунок горизонтальной прокрутки, но чаще всего слово выйдёт за границы отведённого ему блока.</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+1.png/78167a41-190d-4fa6-ad42-94edb58ce6df?t=1546978623888″ /></p> <p>Немного иначе ведут себя flexbox элементы и таблицы, они игнорируют установленную ширину и всегда растягиваются настолько, чтобы вместить текст целиком. В примере ниже flex-контейнеру было задано ограничение по ширине (width: 300px;), однако видно, что в зависимости от контента блок может занимать больше места. Не самая приятная особенность для верстальщика, уверенного, что в его макете всё рассчитано до пикселя.</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+2.png/00d36fc9-bfa7-45e8-ad39-2ab9012e3abc?t=1546978630901″ /></p> <h4>Перенос слов средствами HTML</h4> <p>Как говорилось выше, по умолчанию браузер не переносит слова на несколько строк. Отчасти потому, что он может не знать, как это сделать грамотно.</p> <p>Указать браузеру, в каких местах слово может быть разбито переносом можно с помощью <strong>символа мягкого разрыва</strong> (<code>&amp;shy;</code>). Переносы будут добавлены только там и тогда, когда это необходимо, чтобы слово поместилось в контейнер.</p> <p>В HTML5 появился тег <strong>&lt;wbr/&gt;</strong>, обладающий схожим эффектом, однако он не добавляет символ переноса в месте разрыва слова, что выглядит уже не так красиво.</p> <pre> &lt;html&gt; &lt;head&gt; &lt;style&gt; .card { width: 200px; height: 250px; background: #7cd4ae; padding: 10px; display: inline-block; margin: 2em; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;img src=»troll.jpg»&gt; Двухсот&amp;shy;восьмидесяти&amp;shy;восьми&amp;shy;киллограммовый тролль &lt;/div&gt; &lt;div&gt; &lt;img src=»troll.jpg»&gt; Двухсот&lt;wbr/&gt;восьмидесяти&lt;wbr/&gt;восьми&lt;wbr/&gt;киллограммовый тролль &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p>&nbsp;</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+3.png/04451e1d-9f02-48c5-8f66-b18ac5d042e8?t=1546979243873″ /></p> <p>&nbsp;</p> <h4>Перенос слов средствами CSS</h4> <p>В CSS есть несколько свойств, влияющих на перенос текста.</p> <ul> <li>overflow-wrap (word-wrap) — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-word — принудительно переносить).</li> <li>word-break — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-all — принудительно переносить, keep-all — не переносить, даже если слово содержит дефис).</li> <li>hyphens — автоматический перенос слов, основанный на встроенном в браузер словаре переносов (none — не переносить, auto — переносить длинные слова).</li> </ul> <p>Название word-wrap является устаревшим, но сохраняется для совместимости со старыми версиями браузеров.</p> <p>Свойства word-wrap и word-break на первый взгляд делают одно и то же, но есть небольшие отличия. Word-wrap считается более общим, тогда как word-break предусматривает специальное поведение для китайского, японского и корейского языков. Word-wrap начинает не поместившееся слово с новой строки, а word-break нет. Однако word-break является более приоритетным по отношению к word-wrap.</p> <p>Свойство hyphens является наиболее мощным и удобным, но его поддержка браузерами пока не идеальна. Плюс оно требует обязательного указания языка в атрибуте lang тега (например, lang=»ru»).</p> <pre> &lt;html&gt; &lt;head&gt; &lt;style&gt; .description { width: 100px; background: #7cd4ae; word-wrap: break-word; word-break: break-all; /* более приоритетно */ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div lang=»ru»&gt; Верховный суд Лос-Анджелеса решит судьбу огромнейшего трёхсотвосьмидесятикилограммового изумруда &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p>&nbsp;</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+4.png/eeaafee6-6067-4be4-92db-fd8c5b910a93?t=1546979251721″ /></p> <div><textarea name=»blogs-entry-content-2103008_original»></textarea></div> <script type=»text/javascript»>CKEDITOR.disableAutoInline=true;CKEDITOR.env.isCompatible=true;</script>

Свойство overflow-wrap- перенос длинного слова на новую строку

Свойство overflow-wrap позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.

Синтаксис

селектор { overflow-wrap: break-word | normal; }

Значения

ЗначениеОписание
break-word Заставляет длинные слова переносится на новую строку, если это слово не помещается в контейнер. При этом слово начнется с новой строки.
normal Стандартное поведение: если длинное слово не влазит по ширине в контейнер — оно просто вылезет за его границу (при этом начнется с новой строки).

Значение по умолчанию: normal.

Пример . Значение normal

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { word-wrap: normal; overflow-wrap: normal; border: 1px solid red; width: 200px; }

:

Пример . Значение break-word

А теперь те буквы, которые не помещались, просто перенесутся на следующую строку (при этом длинное слово все равно будет начинаться с новой строки):

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { overflow-wrap: break-word; border: 1px solid red; width: 200px; }

:

Смотрите также

  • свойство word-break,
    которое также позволяет перенести буквы длинного слова на новую строку
  • свойство word-wrap,
    которое является устаревшим названием свойства overflow-wrap
  • свойство hyphens,
    которое включает переносы слов по слогам
  • тег wbr,
    который реализует мягкие переносы средствами HTML
  • тег br,
    с помощью которого можно принудительно заставить перенести текст на новую строку

javascript — перенос текстовых слов в новую строку

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру
,
html — Как сделать перенос текста при изменении размера встроенного элемента div, при этом элемент div не перемещается на новую строку первым? Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру

Загрузка…

    .

    HTML — Как мне обернуть текст в предварительно тег?

    Переполнение стека
    1. Товары
    2. Клиенты
    3. Случаи использования
    1. Переполнение стека Публичные вопросы и ответы
    2. Команды Частные вопросы и ответы для вашей команды
    3. предприятие Частные вопросы и ответы для вашего предприятия
    4. работы Программирование и связанные с ним технические возможности карьерного роста
    5. Талант Нанимать технический талант
    .

    HTML — Как не дать тексту занять более 1 строки?

    Переполнение стека
    1. Товары
    2. Клиенты
    3. Случаи использования
    1. Переполнение стека Публичные вопросы и ответы
    2. Команды Частные вопросы и ответы для вашей команды
    3. предприятие Частные вопросы и ответы для вашего предприятия
    4. работы Программирование и связанные с ним технические возможности карьерного роста
    5. Талант Нанимать технический талант
    .

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *