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

Question 1

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

<input type="text"/>

отображается в браузере так:
Вот как указанный выше HTML отображается в браузере.

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

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

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

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

в браузере он отображается так:
Вот как указанный выше HTML отображается в браузере.

Но я бы хотел, чтобы в браузере отображалось вот так:
Вот как я хотел бы, чтобы указанный выше HTML отображался в браузере.

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

Question 2

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

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

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

Question 3

Слово 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

Question 4

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

Question 5

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

Развернуть фрагмент