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

Перенос текста на кнопке | CSS

Первый вариант позволяет сделать так, чтобы ширина кнопки не превышала ширину родителя («резиновая, сужающаяся кнопка»), а её содержимое переносилось на новую строку при необходимости.

Тег button

11111111111111111111111111111111111111111111111
 style="word-break: break-all;">11111111111111111111111111111111111111111111111

11111111111111111111111111111111111111111111111
 style="white-space: pre-line;">11111111111111111111111111111111111111111111111

11111111111111111111111111111111111111111111111
 style="overflow-wrap: break-word;">11111111111111111111111111111111111111111111111

11111111111111111111111111111111111111111111111
 style="word-wrap: break-word;">11111111111111111111111111111111111111111111111

11111111111111111111111111111111111111111111111
 style="-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;">11111111111111111111111111111111111111111111111

11111­111111111111111111111111111111111111111111
 11111­111111111111111111111111111111111111111111

11111​111111111111111111111111111111111111111111
 11111​111111111111111111111111111111111111111111

Свойство overflow-wrap

Свойство overflow-wrap позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.

Синтаксис

Значения

Значение по умолчанию: 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 ,
  с помощью которого можно принудительно заставить перенести текст на новую строку

Перенос на новую строку input и label вне тэга form

Хочется перенос строк после метки, а писать br некрасиво. Что порекомендуете?

Отслеживать

задан 9 дек 2011 в 8:49

1,238 2 2 золотых знака 12 12 серебряных знаков 30 30 бронзовых знаков

Закатайте строки в div’ы.

9 дек 2011 в 8:56

Ну а более изящного варианта не существует? Я тогда не знаю чем div-ы лучше br

9 дек 2011 в 8:57

div-ы можно стилизовать (например: отступами), br — просто перенос строки.

9 дек 2011 в 9:15

Я имею в данной ситуации))) я знаю в чем принципиальная разница div и br))

9 дек 2011 в 9:25

Более изящный вариант: закатайте строки в p. Будет семантично, плюс с возможностью стилизации.

9 дек 2011 в 10:16

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

С или без него разницы ни какой. Можно сделать (вариант 1):

 .check-label  Word - Текстовый процессор  Excel - Редактор электронных таблиц 

Или, вариант 2 (достаточно мутный, так как float:left для inline элементов н всегда хорошо работает):

 .check-button Word - Текстовый процессор Excel - Редактор электронных таблиц 

Перенос текста в input html

Доброго времени суток. Как сделать чтобы высота инпута автоматически подстраивалась под текст.
У меня много текста и слова не переносятся на другую строчку.

Лучший ответ

P.s. `-4` px возникают из-за padding 2px; по умолчанию.

Илья РоманенкоУченик (97) 4 года назад
Нужен именно инпут)
Elepsis Eclipse Оракул (63509) Он не умеет разбивать строку. для этого и существует textarea)
Остальные ответы
Похожие вопросы
Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.