Отключаем перенос слов и добавляем скролл в textarea

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

Чтобы отменить перенос текста на новую строку в textarea, используйте CSS-свойство white-space: nowrap;. Максимально превысив ширину textarea, текст начнёт скроллиться горизонтально:

<textarea style="white-space: nowrap; overflow-x: auto;"></textarea>

Автоматическое горизонтальное прокручивание обеспечивается свойством overflow-x: auto;, когда объем текста превышает установленные размеры.

Решение проблем наследования и особенностей кейсов

В некоторых ситуациях базовые решения могут оказаться неэффективными, и требуемыми становятся более специфические настройки.

Преодоление стилей от родительских элементов

Следует предотвратить наложение нежелательных переносов от стилей родительских элементов. В этом поможет следующее правило:

textarea {
  overflow-wrap: normal;
}

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

Сохранение пробелов для блоков кода

Для корректного отображения блоков кода или текстов с важными отступами следует использовать:

textarea {
  white-space: pre;
}

Использование атрибута 'wrap'

Атрибут wrap="soft" указывает браузеру не вставлять жесткие переносы строк при отправке формы:

<textarea wrap="soft"></textarea>

Устранение вертикальной прокрутки

Если вертикальная прокрутка не требуется, пользуйтесь таким CSS:

textarea {
  overflow-y: hidden;
}

Обеспечение совместимости в разных браузерах

Специфика работы разных браузеров требует подбора специальных решений для обеспечения стабильного функционирования.

Настройка горизонтальных полос прокрутки в Firefox

Для управления горизонтальной прокруткой в Firefox используйте:

textarea {
  overflow: auto;
  scrollbar-width: auto; /* Характерно для Firefox */
}

Особенности Internet Explorer 11

В IE 11 параметр wrap="off" служит для запрета переноса строк. Удостоверьтесь, что это не вызывает конфликтов с настройками режима совместимости.

Совместимость с XHTML 1.1 Strict

Если важно соблюсти XHTML 1.1 Strict, упростите атрибут wrap при помощи JavaScript:

document.querySelector('textarea').setAttribute('wrap', 'off');

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

Представьте себе текст как прямолинейное путешествие без остановок:

До:      [🚂🌍🚂🌍🚂]
После: [🚂🌍🌍🌍🚂]

Установка CSS-свойств заставит ваш текст двигаться по одной линии и при необходимости скроллиться:

textarea {
  white-space: nowrap;  /* Текст движется исключительно вперёд! */
  overflow-x: scroll;   /* При переполнении текст скроллится */
}

Таким образом, длинный текст будет "скользить" в одном направлении.

Отслеживание устаревшей информации

Всегда проверяйте надежность информации, так как некоторые источники, включая устаревшие версии документации, могут содержать недостоверные сведения.

Тестирование на разных платформах

Тестируйте поведение вашего решения в различных браузерах, чтобы убедиться в его корректной работе в любом "поезде" – будь то Chrome или Firefox.

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

1. Свойство CSS word-wrap – W3Schools — Подробное руководство по управлению переносом текста в CSS.
2. white-space – CSS: каскадные таблицы стилей | MDN — Объяснение MDN по управлению пробелами в CSS.
3. HTML-тег textarea – W3Schools — Инструкции и примеры использования элемента <textarea> в HTML.
4. overflow | CSS-Tricks — Справочник по использованию свойства CSS overflow.
5. Свежие вопросы по 'textarea+word-wrap' – Stack Overflow — Обсуждения и решения по теме переноса слов в textarea.
6. Управление длинными словами и URL (принудительные переносы, переносы слов, многоточие и т. д.) | CSS-Tricks — Рекомендации по управлению длинными текстами, чтобы они не вылезали за границы контейнеров.