Свойство overflow-wrap
Свойство overflow-wrap позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| break-word | Заставляет длинные слова переноситься на новую строку, если это слово не помещается в контейнер. При этом слово начнется с новой строки. |
| normal | Стандартное поведение: если длинное слово не влазит по ширине в контейнер — оно просто вылезет за его границу (при этом начнется с новой строки). |
Значение по умолчанию: normal .
Пример . Значение normal
В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):
#elem < word-wrap: normal; overflow-wrap: normal; border: 1px solid red; width: 200px; >
Пример . Значение break-word
А теперь те буквы, которые не помещались, просто перенесутся на следующую строку (при этом длинное слово все равно будет начинаться с новой строки):
#elem < overflow-wrap: break-word; border: 1px solid red; width: 200px; >
Смотрите также
- свойство word-break ,
которое также позволяет перенести буквы длинного слова на новую строку - свойство word-wrap ,
которое является устаревшим названием свойства overflow-wrap - свойство hyphens ,
которое включает переносы слов по слогам - тег wbr ,
который реализует мягкие переносы средствами HTML - тег br ,
с помощью которого можно принудительно заставить перенести текст на новую строку
flexbox — перенос блока на новую строку
Как при маленьком экране (к примеру max-width:480px ) сделать так, чтобы блок отправить переходил на новою строку?
.input-group < display:flex; flex-direction: row; >.modal-form < width: 100%; height: 100%; display:flex; >.modal-input-text < display: flex; align-items: center; padding: .375rem .75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; text-align: center; white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: .25rem; >.send-number
+380 Отправить
Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 11 июл 2018 в 11:00
655 2 2 золотых знака 8 8 серебряных знаков 20 20 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
В .modal-form добавляем правило переноса элементов:
.modal-form
Тогда, если во флексбокс не будет влезать его содержимое, то оно переедет на следующую строку. Для полной уверенности в переносе можно добавить @media запрос растягивающий кнопку на 100% по ширине от родителя:
@media screen and (max-width: 480px) < .send-number < width: 100%; >>
white-space
normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.
Действие значений на текст представлено в табл. 1.
Табл. 1. Перенос текста и пробелы при разных значениях white-space
Значение
Перенос текста
Пробелы
normal
Переносится
Не учитываются
nowrap
Не переносится
Не учитываются
pre
Не переносится
Учитываются
pre-line
Переносится
Не учитываются
pre-wrap
Переносится
Учитываются
HTML5 CSS2.1 IE Cr Op Sa Fx
white-space
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
[window.]document.getElementById(» elementID «).style.whiteSpace
Браузеры
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .
Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .
Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .
Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal , nowrap , и pre воспринимаются как pre-wrap .
Как сделать перенос блока на новую строку?
Как сделать так чтобы блоки размещались не в одну строку, а чтобы каждый блок с новой строки?
.dialog < box-shadow: 0 0 5px rgba(0,0,0,0.2); padding: 10px 30px; >.d-content < display: inline-block; padding: 10px; background: #dcf8c6; border-radius: 0.4em; margin-top: 5px; >.mess_username < color: #1d5987; font-weight: 700; font-size: 12px; >.mess_date < color: #6c757d; font-weight: 400; font-size: 12px; >.mess_text < display: flex; >.new-message
- Вопрос задан более двух лет назад
- 12600 просмотров
5 комментариев
Простой 5 комментариев
Ankhena @Ankhena Куратор тега CSS
Перестать задавать им inline-block.
Блочные элементы сами по себе располагаются с новой строки.
Предыдущая запись