Обтекание текста внутри элемента ввода type = "text" HTML / CSS

Question

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

<input type="text"/>

отображается в браузере следующим образом:Когда я добавляю следующий текст,

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

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

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

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

Answer 1

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

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

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

Answer 2

Word Break будет имитировать некоторые намерения

input.break {
    word-wrap: break-word;
    word-break: break-all;
    height: 80px;
}

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

Answer 3

Вы можете не использовать для него ввод, вам нужно использовать вместо него 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>, который сделан для , а не работает со строками вообще.

Answer 4

Для создания текстового ввода, в котором значение под капотом представляет собой однострочную строку, но представляется пользователю в формате с переносом слов, вы можете использовать атрибут 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>