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

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

<input type="text"/>

відображається у браузері приблизно так:

Швидкий коричневий лис перестрибнув ледачого собаку.

Використовуючи HTML нижче,

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

він відображається у браузері приблизно так:

Це textareaробота - для багаторядкового введення тексту. The input не зробить цього ; він не був призначений для цього.

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

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

Розрив слів буде імітувати деякий намір

    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

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

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