Как перенести текст на новую строку в CSS

Длинные тексты могут казаться неконтролируемыми во время веб-дизайна. Но они тоже могут быть неизбежными, и иногда они в конечном итоге пересекают границы. Это может создать неплотную объектную модель документа (DOM) с ненужным переполнением, что неудобно для пользователя.

Но вот и хорошие новости: вы можете справиться с такими длинными текстами, перенеся их на новую строку с помощью CSS. Здесь мы покажем вам, как обернуть длинные непрерывные тексты с помощью CSS.

Как работает обтекание текстом CSS

CSS обрабатывает растянутые длинные слова с помощью встроенного перенос слова или переполнение имущество.

как найти старые текстовые сообщения

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

Связано: что вам нужно знать о DOM

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

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

Как обернуть длинные слова с помощью CSS Word Wrap

Перенос слов в новую строку с помощью CSS легко и не требует громоздких настроек CSS для работы.

Например, длинный h2 текст в текстовом контейнере на образце изображения ниже пересекает границу:

Давайте посмотрим, как мы можем перенести его на следующую строку, используя перенос слова Свойство CSS:

HTML :

  
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above

CSS :

.wrap-it{  
word-wrap: break-word;  
}

После упаковки долгое h2 текст в образце изображения, вот результат:

Вот и все! Теперь вы знаете, как перенести слова на новую строку в вашей модели DOM с помощью CSS.

Apple Watch Series 6 нержавеющая сталь против алюминия

Связанный: Как настроить таргетинг на часть веб-страницы с помощью селекторов CSS

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

Использовать переполнение вместо этого просто замените перенос слова с этим.

Важно переносить слова на веб-страницу

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

Следовательно, применение переноса текста к такому разделу необходимо для сохранения целостности модели DOM.

почему Firefox работает так медленно

Делиться Делиться Твитнуть Эл. адрес Как использовать медиа-запросы в HTML и CSS для создания адаптивных сайтов

Хотите, чтобы ваш сайт выглядел потрясающе на мобильных устройствах? Пришло время узнать, как использовать медиа-запросы в CSS.

Читать далее Похожие темы

Программирование
CSS
Объектная модель документа

Об авторе Идису Омисола(Опубликовано 94 статей)

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

Ещё от Idowu Omisola

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться