Перенос текста в input type='text' HTML/CSS без textarea

Быстрый ответ

Элемент <input type="text"> не предоставляет возможности переносить текст на следующую строку. Для многострочного ввода рекомендуется использовать элемент <textarea>:

<textarea rows="4" cols="50">Введите текст здесь...</textarea>

Чтобы обеспечить размер поля в соответствии с вашим дизайнерским видением, можно использовать CSS. В качестве альтернативы предлагается использование <div contenteditable="true"> для создания стильного редактируемого поля:

<div contenteditable="true" style="border: 1px solid; width: 200px; height: 100px; overflow: auto;">
  Введите текст здесь...
</div>

Оба этих элемента поддерживают перенос текста на следующую строку.

Расширенное описание техник обработки переноса текста

В данном разделе мы детально рассмотрим методы создания многострочных полей для ввода текста и возможные варианты обработки переноса текста, которые не достигаются при использовании элемента input type="text".

Перенос текста при помощи <textarea>

Элемент <textarea> предназначен для работы с многострочным текстом. С помощью CSS можно настроить вид текстового поля так, чтобы оно гармонировало с общим дизайном формы и обеспечивало эффективное взаимодействие с пользователем:

/* Отключаем изменение размеров textarea */
textarea { 
  resize: none;
}

Можно использовать CSS для отключения изменения размеров с помощью resize: none;, задайте wrap="soft" для переноса строк, а также воспользуйтесь атрибутом maxlength для ограничения максимального количества вводимых символов.

Подробнее об этом расскажет наш спикер на видео

Гибкое управление переполнением с помощью contenteditable

Другим решением является <div contenteditable="true">, который предоставляет возможность создания стильного редактируемого поля. Вы можете индивидуально настроить его внешний вид, используя CSS-свойства, такие как width, border, height. Изменения в содержимом можно отслеживать посредством обработчиков событий, а затем управлять им через свойство textContent в JavaScript.

Что выбрать: <textarea> или редактируемый <div>?

Каждый из этих элементов служит своей задаче:

• <textarea> идеален для форм, где необходима стандартная возможность ввода текста.
• Редактируемый <div> подходит для реализации WYSIWYG-редакторов и обработки форматированного текста.

Данные варианты были тестированы в различных браузерах с целью обеспечения совместимости и стабильной работы.

Визуализация

Представьте ситуацию: вы пытаетесь записать длинное предложение в вашу маленькую записную книжку:

Записная книжка: "Этот текст слишком длинный, чтобы поместиться у меня, дружище!"

Возможное решение этой проблемы:

/* Кто там? Переполнение. 
Переполнение кто? 
Overflow: hidden! (Надеюсь это было не слишком за гранью!) */

input[type="text"] {
  overflow: hidden;
  text-overflow: ellipsis; 
}

📝 До: "Этот текст слишком длинный, чтобы..."
📝 После: [Текст оборачивается по границам, подобно интроверту на вечеринке]

Делаем редактируемый <div> похожим на input

Эффективными инструментами для придания редактируемому <div> продолжительностього поля ввода input могут стать:

• border для создания видимых границ поля,
• padding для регулировки внутреннего отступа,
• font-family и font-size позволяют сделать текст вписывающимся в стиль остального интерфейса.

JavaScript также можно использовать для очистки содержания, например, для удаления новых строк или запрета на ввод определённых символов, обеспечивая таким образом "чистоту" div.

Улучшаем взаимодействие

Почитайте о дополнительных возможностях улучшения взаимодействия с текстовыми полями, о которых многие забывают:

• Используйте datalist с <input> для предложения вариантов автозаполнения,
• Воспользуйтесь JavaScript-библиотеками для маскирования ввода, особенно при работе со сложными шаблонами,
• Применяйте aria-label или aria-labelledby для обеспечения доступности, чтобы ваш интерфейс был доступен для всех пользователей.

Полезные материалы

1. Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc) | CSS-Tricks — Разнообразные CSS-техники для работы с длинными текстами и ссылками.
2. The box model – Learn web development | MDN — Изучение CSS-блочной модели, являющейся неотъемлемой частью работы веб-разработчика.
3. How to remove the space between inline/inline-block elements? – Stack Overflow — Полезные советы сообщества о том, как убрать пробелы между элементами в строке.
4. CSS word-wrap property — Подробное объяснение свойства word-wrap для эффективной работы с переносом текста.
5. overflow | CSS-Tricks — Глубокое погружение в свойство overflow, имеющее влияние на обтекание текста.
6. Can I use... Support tables for HTML5, CSS3, etc — Актуальная информация о поддержке CSS свойств различными браузерами.