Как сделать перенос строки?

0 0

Сделать перенос строки в желаемом месте текста можно несколькими путями. Рассмотрим несколько вариантов: через элемент <br>, элемент <pre> и свойство white-space.

Использование <br>

Элемент <br> делает перенос строки в том месте, где он располагается. Например, в этом предложении каждое слово будет отображаться на отдельной строке текста, потому что между словами вставлен <br>.

<p>Первому<br>игроку<br>приготовиться</p>

В примере 1 элемент <br> применяется для вывода стиха, где переносы строк выполняются определённым, задуманным автором образом.

Пример 1. Использование <br>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Перенос текста</title> </head> <body> <p>Не знаю, о чём я тоскую.<br> Покоя душе моей нет.<br> Забыть ни на миг не могу я<br> Преданье далёких лет.</p> <p>Генрих Гейне, Лорелея. Перевод Самуила Маршака</p> </body> </html> Использование <pre>

Элемент <pre> отображает текст «как есть» со всеми его пробелами и переносами. Обычно это применяется для вывода кода программы, где отступы играют важное значение (пример 2).

Пример 2. Использование <pre>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Перенос текста</title> <style> pre { padding: 1em; /* Поля вокруг текста */ border: 1px solid #333; /* Параметры рамки */ font-size: 1rem; /* Размер шрифта */ } </style> </head> <body> <pre>if a % 2 == 0: print(‘Чётное число’) else: print(‘Нечётное число’)</pre> </body> </html>

Текст внутри <pre> выводится моноширинным шрифтом, иными словами, каждая буква имеет одинаковую ширину. Это позволяет располагать символы друг под другом и с помощью пробелов легко выравнивать строки. Переносы текста, как и пробелы, внутри <pre> отображаются так же, как и в коде HTML, поэтому дополнительно вставлять какие-то элементы или ещё как-то обозначать перенос не требуется.

Использование свойства white-space

У свойства white-space есть несколько значений, дающих разные возможности, но нас интересует значение pre-line, которое учитывает только переносы текста и игнорирует идущие подряд пробелы (пример 3). Получается, что от <pre> взяли только переносы строк без учёта пробелов. Сам шрифт тоже не меняется на моноширинный.

Пример 3. Использование white-space

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Перенос текста</title> <style> .pre { white-space: pre-line; /* Только переносы строк */ } </style> </head> <body> <div class="pre">В далёкой стране жил умный червячок по имени Оскар. Он был не обычным червячком, потому что Оскар любил смотреть на звёзды и задавать вопросы, на которые никто из его друзей не мог ответить.</div> </body> </html>

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

Пример 4. Перенос строк в зависимости от ширины

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Перенос текста</title> <style> /* Стиль для ширины меньше 600 пикселей */ @media screen and (max-width: 600px) { .pre { white-space: pre-line; /* Переносы строк */ } } </style> </head> <body> <div class="pre">В далёкой стране жил умный червячок по имени Оскар. Он был не обычным червячком, потому что Оскар любил смотреть на звёзды и задавать вопросы, на которые никто из его друзей не мог ответить.</div> </body> </html>

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

Автор: Влад Мержевич
Источник: webref.ru

Оставьте ответ

Ваш электронный адрес не будет опубликован.