Как сделать перенос строк в css
Перейти к содержимому

Как сделать перенос строк в css

  • автор:

Перенос строки CSS

normal текст переносится | пробелы не учитываются | Enter (разрыв строки) не учитывается pre-line текст переносится | пробелы не учитываются | Enter учитывается pre-wrap текст переносится | пробелы учитываются | Enter учитывается pre текст не переносится | пробелы учитываются | Enter учитывается nowrap текст не переносится | пробелы не учитываются | Enter не учитывается initial normal inherit наследует значение родителя unset наследует значение родителя

ноль один два три Enter пять шесть семь восемь девять десять одиннадцать двенадцать тринадцать четырнадцать

  
ноль один два три Enter пять шесть семь восемь девять десять одиннадцать двенадцать тринадцать четырнадцать

У тега по умолчанию white-space имеет значение pre .

  • в комментариях, которые заполняют посетители, далёкие от HTML. Абзацы разбиваются не тегом

    , а перевод строки обозначается не тегом
    , а символом , который печатает клавиша Enter .

  • для демонстрации HTML кода.
  • для оформления стихов.

Запретить перенос

Значения pre-wrap и pre-line поддерживаются Internet Explorer 8

Запрет переноса с помощью white-space: nowrap;

  Значения pre-wrap и pre-line поддерживаются Internet Explorer 8 

Запрет переноса с помощью неразрывного пробела   и/или неразрывного дефиса ‑

В данном примере они более подходят, так как занимают меньше места. К тому же при использовании overflow-wrap: break-word; или word-wrap: break-word; или word-break: break-all; символы всё же в определённый момент переходят на следующую строчку.

Значения prewrap и preline поддерживаются Internet Explorer 8

Прокрутка при отключении автопереноса

Часто совместно со значениями pre или nowrap элементу меняется значение свойства overflow , чтобы добавить полосу прокрутки или обрезать выходящую за границу часть, дабы не появился горизонтальный скролл у всего сайта.

  overflow: visible; 
Значения pre-wrap и pre-line поддерживаются IE 8
overflow: hidden;
Значения pre-wrap и pre-line поддерживаются IE 8
overflow-x: scroll;
Значения pre-wrap и pre-line поддерживаются IE 8
overflow: auto;
Значения pre-wrap и pre-line поддерживаются IE 8

Разрыв строки

Тег

Элементы после тега
будут перенесены на следующую строку с любым значением свойства white‑space .

ноль один

три Enter пять шесть

 div 
ноль один <br> три Enter пять шесть

Блочный элемент

три Enter пять шесть

 #raz 
ноль один <div></div> три Enter пять шесть

Свойство white-space

 h1 < white-space: pre-line; > span 

Это должно быть сверху это под ним

Разрыв строки в псевдоэлементах ::before / ::after

  
Текст

У моноширинного шрифта все символы одной ширины, в том числе пробел

  
Дельфин из символов
  • Перенос слов CSS (свойство word-wrap и др.)
  • Красная строка CSS (свойство text-indent )
  • Колонки CSS

Свойство white-space

Свойство white-space устанавливает как переносить текст на новую строку, а также как отображать пробелы между словами и переносы строк (места, где был нажат Enter при наборе кода).

Синтаксис

Значения

Значение Описание
nowrap Запрещает тексту переносится на другую строку, даже если он не помещается в ширину контейнера (в этом случае текст просто вылезет за его границы). Однако, добавление тега br заставит текст перенестись на новую строку.
pre Текст показывается так, как был набран в блокноте при верстке сайта: со всеми пробелами и enter-ами (если в коде набрано несколько пробелов — на экране тоже будет несколько). При этом браузер не будет переносить текст на новую строку, если он не помещается в контейнер — текст просто вылезет за его границы. Аналог тега pre, но в отличие от него не меняет шрифт на моноширинный (про моноширинный шрифт см. свойство font-family .
pre-wrap То же самое, что и pre, отличие в том, что если текст слишком длинный и не влазит в контейнер — браузер перенесет его на другую строку.
pre-line Браузер учитывает только Enter-ы в HTML коде и игнорирует все остальное (несколько пробелов будут выглядеть как один, браузер сам расставляет разрывы строк).
normal Стандартное поведение: браузер сам расставляет разрывы строки так, чтобы слова поместились в контейнер. Несколько пробелов в коде будут выглядеть как один на экране.

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

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

В данном примере текст не поместится в контейнер и вылезет за его границы, так как задано значение nowrap :

Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.

#elem < width: 200px; white-space: nowrap; border: 1px solid red; >

Пример . Значение nowrap и тег br

Если добавить тег br — текст перенесется на новую строку (именно в том месте, где стоит br ):

Lorem ipsum dolor sit
amet, consectetur adipiscing elitorire.

#elem < width: 200px; white-space: nowrap; border: 1px solid red; >

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

В данном примере текст показывается так, как был набран в редакторе HTML кода (со всеми отступами клавишей Tab , с Enter и так далее):

Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.

#elem < width: 200px; white-space: pre; border: 1px solid red; >

Пример . Значение pre-wrap

А сейчас текст показывается так, как был набран в редакторе HTML кода, однако, вылезающие части переносятся на новую строку:

Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.

#elem < width: 200px; white-space: pre-wrap; border: 1px solid red; >

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

  • свойства word-break и overflow-wrap ,
    которые позволяют перенести буквы длинного слова на новую строку
  • свойство tab-size ,
    которое устанавливает размер отступа, созданного клавишей Tab
  • свойство hyphens ,
    которое включает переносы слов по слогам
  • свойство overflow ,
    которое обрезает вылезающие за границу блока части
  • тег pre ,
    который показывает текст так, как он был набран в редакторе HTML кода

— элемент переноса строки

HTML-элемент устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки.

Интерактивный пример

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

Примечание: Не используйте для увеличения разрыва между строками в тексте; используйте CSS-свойство margin элемента .

Атрибуты

Устаревшие атрибуты

Определяет, где начинается следующая строка после перевода строки.

Стилизация с CSS

Элемент
имеет единственную цель – создать разрыв линии в блоке текста. Таким образом, он не имеет размеров или визуального стиля как такового. Есть всего несколько свойств, которые вы можете стилизовать.

Вы можете установить значение margin на
чтобы увеличить расстояние между линиями в блоке, но это плохая практика – лучше использовать свойство line-height для этой цели.

Примеры

Простой br

В следующем примере мы используем элемент
для разрыва линий в почтовом адресе:

br /> 331 E. Evelyn Avenuebr /> Mountain View, CAbr /> 94041br /> USAbr /> 

Результат будет выглядеть так:

Проблемы доступности

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

Техническая сводка

  • Категории контентаОсновной поток, текстовый контент.
  • Разрешённое содержимое Отсутствует, это пустой элемент.
  • Пропуск теговДолжен иметь открывающий тег, но не закрывающий тег. В XHTML документах элемент пишется как
    .
  • Допустимые родительские элементы Любой элемент, который поддерживает текстовый контент.
  • Интерфейс DOMHTMLBRElement

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

Specification
HTML Standard
# the-br-element

Совместимость с браузерами

BCD tables only load in the browser

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

  • Элемент
  • Элемент

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 19 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Перенос строки в HTML и CSS с помощью тегов: быстрая инструкция

Lorem ipsum dolor

Напишем

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

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

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

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

Тег — это более широкий тег, поэтому использовать его только для переноса строк — это дурной тон, но вариант такой есть.

Тег

— это абзац. Все мы знаем еще со времен школьной скамьи, что абзац всегда начинается с новой строки. Поэтому именно

позволяет красиво разбивать текст на абзацы и осуществ лять перенос строки в HTML. Тег <р>— это парный тег, поэтому не нужно забывать «закрывать» абзац тегом .

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

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

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

Напишем

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

Напишем

Допустим , у нас есть некий HTML-код:

В
е
р
т
и
к
а
л
ь
н
о

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

Тут на помощь придут теги CSS, которые могут осуществить перенос строк в HTML. Вот несколько из этих свойств:

  • overflow-wrap со значениями: break-word
  • word-wrap со значениями: break-word
  • word-break со значениями: keep-all, break-all
  • line-break со значениями: loose, normal, strict
  • hyphens со значениями: none, auto

Все эти свойства будут осуществлять автоматический перенос строк и слов в рамках блока, к которому они применяются. Если нужно в определенном месте перенести слово, то можно воспользоваться «ручным способом» — для этого можно использовать сочетание символов «­». Запуская бесплатные игровые атоматы на freeslots.com.ua при помощи мобильных гаджетов, игроки смогут получать удовольствие от процессом игры в казино и зарабатывать настоящие деньги и срывать джекпоты. Достаточно зарегистрироваться в интернет казино и провести внесение средств на депозитный счет, чтобы можно было играть на слотах на деньги. При применении этого символа слово перенесется по всем правилам русского языка — с дефисом.

Заключение

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

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

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

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

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