Как создать перенос строки в тексте в HTML

Как создать перенос строки в тексте в HTML?

Но для вас требуется продвижение веб-сайта либо создание сайта-лидера, безупречного для SEO? Тогда вы сможете бросить заявку на продвижение либо заявку на создание веб-сайта. Если вы собираетесь продвигать веб-сайт без помощи других — продолжайте чтение!

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

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

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

1-ый вариант

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

Слэш в конце можно и не употреблять, но с ним код считается завершенным и правильным — как говорится, по фэн-шую! На примере 3-х параграфов вышеупомянутого текста перенос строк смотрится вот так:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.
<br />
Mauris est lorem, blandit nec turpis et, elementum imperdiet diam. Quisque eu pulvinar ipsum. Vivamus sit amet tortor a orci commodo convallis eget ac arcu.
<br />
Nulla lacinia augue orci, nec consequat eros viverra sit amet. Phasellus scelerisque, arcu eget hendrerit fringilla, elit urna commodo ante, a semper elit diam ut felis.

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

2-ой вариант

Для параграфов существует особый тег:

<p></p>
Заключив текст в данный тег он перенесется на новейшую строчку и произойдет маленький отступ:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.</p>
<p>Mauris est lorem, blandit nec turpis et, elementum imperdiet diam. Quisque eu pulvinar ipsum. Vivamus sit amet tortor a orci commodo convallis eget ac arcu.</p>
<p>Nulla lacinia augue orci, nec consequat eros viverra sit amet. Phasellus scelerisque, arcu eget hendrerit fringilla, elit urna commodo ante, a semper elit diam ut felis.</p>

Отредактировать отступ можно при помощи глобальных стилей:

p <
margin: 0;
padding: 0 0 10px 0; // Отступ 10px снизу
>

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

<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.</p>

<style>
p.block <
margin: 0;
padding: 0 0 10px 0; // Отступ 10px снизу
>
</style>

Это стремительно и комфортно, а возможность корректировать отступ меж параграфами — доп плюс.

3-ий вариант

Данный метод похож на предшествующий, кроме самого тега — тут употребляется «div»:

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.</div>
<div>Mauris est lorem, blandit nec turpis et, elementum imperdiet diam. Quisque eu pulvinar ipsum. Vivamus sit amet tortor a orci commodo convallis eget ac arcu.</div>
<div>Nulla lacinia augue orci, nec consequat eros viverra sit amet. Phasellus scelerisque, arcu eget hendrerit fringilla, elit urna commodo ante, a semper elit diam ut felis.</div>

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

div < padding: 0 0 10px 0; // Отступ 10px снизу >
Либо, как показано выше, через свой идентификатор:

<div >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.</div>

<style>
div.block <
margin: 0;
padding: 0 0 10px 0; // Отступ 10px снизу
>
</style>

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