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

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

<input type="text"/>

отображается в браузере следующим образом:

<ч/" > Когда я добавляю следующий текст,

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

Используя HTML ниже,

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

он отображается в браузере следующим образом:

<ч/" > Но я бы хотел, чтобы он отображался в браузере следующим образом:

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

Ответ 1

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

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

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

Ответ 2

Перерыв на слова будет имитировать некоторые намерения

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

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

Ответ 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; в области стиля: Чтобы сделать textarea не изменяемым, вы можете использовать стиль с resize:none; следующим образом:

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

Таким образом, вы можете иметь или использовать текстовое поле с 14 строками и 10 столбцами со словом wrap и максимальной длиной символов "40" символов, которые работают точно так же, как текстовое поле ввода, но с строками вместо и без ввода входного текста.

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

Ответ 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>