Обтекание текста внутри элемента input type = «text» HTML / CSS

96

HTML-код, показанный ниже,

<input type="text"/>

отображается в браузере так:

Когда я добавляю следующий текст,

Быстрая, коричневая лиса, перепрыгнула через ленивого пса.

Используя приведенный ниже HTML,

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

в браузере он отображается так:

Но я бы хотел, чтобы в браузере отображалось вот так:

Я хочу, чтобы текст в моем элементе ввода был обернут. Можно ли это сделать без текстового поля?

html input word-wrap Веб-дизайнер
источник
3
Нет, не думаю. Но почему текстовое поле не подходит?
Pekka
35
Использование текстового поля иногда не подходит, потому что вы не хотите разрешать ввод нескольких строк текста. Просто чтобы обернуть одну строку текста (Примечание: это не одно и то же).
Flatliner DOA
Существует решение, которое обсуждается именно для этой цели с CSSWG для стандартизации, но, к сожалению, я не могу найти проблему.
Null
Я нашел это; github.com/w3c/csswg-drafts/issues/2141
Null
1
@Pekka 웃 не то, чтобы это актуально, но некоторые причины включают: мы не можем использовать проверку html5 в текстовых областях; мы не можем использовать ограничения шаблона для проверки текстовых областей; textarea является ненужным синонимом для input type = text (это ввод, который является type text!), что означает удвоение стиля и т.д., и т.д. Короче говоря, есть много причин.
Питер Конга-Камау

Ответы:

62

Это textareaработа - для многострочного ввода текста. Они input этого не сделают ; он не был предназначен для этого.

Так что используйте textarea. Помимо визуальных различий, доступ к ним осуществляется через JavaScript (использование valueсвойства).

Вы можете предотвратить ввод новой строки через inputсобытие, просто используя replace(/\n/g, '').

Алекс
источник
69
На самом деле это не отвечает на вопрос о том, как собрать одну строку ввода при отображении ее в оболочке во время ввода.
ehdv
3
Основная проблема заключается в том, что текстовое поле подавляет кнопку перехода на мобильных устройствах.
Дэн
2
@alex Совершенно верно. Поэтому, если вам нужен настоящий многострочный ввод, лучше использовать текстовое поле, но если вам просто нужен ввод с переносом слов, тогда решение css лучше.
Дэн
1
Я собирался сказать, что <textarea>это не будет работать с такими вещами, как автозаполнение jQuery, а просто измените значение <input>на, <textarea>и это все, что необходимо. Ура стандартам!
Sablefoste, 03
9
Как сказано выше: перенос строки! == многострочной строки. Я не уверен, почему это принятый ответ, поскольку он не отвечает на вопрос.
mattLummus
37

Слово Break имитирует некоторые намерения

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }
<input type="text" value="The quick brown fox jumped over the lazy dog" />
Развернуть фрагмент

В качестве обходного пути это решение потеряло свою эффективность в некоторых браузерах. Пожалуйста, проверьте демонстрацию: http://cssdesk.com/dbCSQ

Тьяго Маседо
источник
7
Я только что протестировал его в Firefox 43.0.4, и он не работает, однако в Safari 9 и Chrome 48 он, похоже, работает: cssdesk.com/dbCSQ
Джейсон Сперске
6
Прикрепленная демонстрация от @JasonSperske не работает для меня ни в Firefox 45, ни в Chrome 50.
czerny
Демо работает для меня в chrome 48 на linux, но тот же CSS на моей странице - нет.
Mnebuerquo,
40
Решение устарело как минимум с chrome 50 :(
userlond
4
Забудьте об этом решении: не работает с Chrome 74/75, Firefox 63/67, Edge 42, IE 11 и UCBrowser 7.0 (но работает с GNOME Web 3.28 - AppleWebKit / 605.1.15)
tanguy_k
10

Вы не можете использовать input для этого, вам нужно вместо этого использовать textarea. Используйте textarea с wrap="soft"кодом и необязательными остальными атрибутами, например:

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

Атрибуты: Чтобы ограничить количество текста в нем, например, до «40» символов, вы можете добавить атрибут maxlength="40"следующим образом: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> Чтобы скрыть стиль прокрутки для него. если вы используете только overflow:scroll;или overflow:hidden;или overflow:auto;он будет принимать только влиять на одну полосу прокрутки. Если вам нужны разные атрибуты для каждой полосы прокрутки, используйте такие атрибуты overflow:scroll; overflow-x:auto; overflow-y:hidden;в области стиля: Чтобы текстовое поле не изменялось, вы можете использовать стиль resize:none;следующим образом:

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

Таким образом, вы можете иметь или использовать в качестве примера текстовое поле с 14 строками и 10 столбцами с переносом слов и максимальной длиной символа «40» символов, которое работает точно так же, как текстовое поле ввода, но вместо этого со строками и без использования вводимого текста.

ПРИМЕЧАНИЕ: textarea работает со строками, в отличие от ввода, <input type="text" name="tbox" size="10"></input>который вообще не работает со строками.

SeekLoad
источник
7

Чтобы создать текстовый ввод, в котором значение под капотом представляет собой однострочную строку, но представляется пользователю в формате с переносом слов, вы можете использовать атрибут contenteditable для одного <div>или другого элемента:

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'
div[contenteditable] {
  border: 1px solid black;
  width: 200px;
}
<div contenteditable></div>
Развернуть фрагмент

Сэм Херрманн
источник