Ограничение растяжения textarea по горизонтали в CSS
Быстрый ответ
Чтобы пользователь не мог изменять размер текстового поля, необходимо добавить к тегу <textarea>
в CSS свойство resize: none;
:
textarea { resize: none; }
Такой подход гарантирует неизменность размера поля, в результате чего сохраняется целостность дизайна вашего веб-сайта.
Регулировка изменения размеров
Вы не обязаны полностью запрещать изменение размера; возможно его разрешить только в одном направлении. Для этого используйте свойства resize: vertical;
или resize: horizontal;
:
/* Поле можно растягивать только вертикально */
textarea { resize: vertical; }
/* Поле можно растягивать только горизонтально */
textarea { resize: horizontal; }
Установление пределов изменения размера
Если вы хотите предоставить пользователям возможность изменять размер поля в определенных пределах, задайте минимальные и максимальные значения высоты и ширины, используя max-height
, max-width
, min-height
, и min-width
:
/* Растягивание поля разрешено, но с ограничениями */
textarea {
resize: vertical;
max-height: 300px;
min-height: 100px;
}
Эффективное стилизование
Чтобы эти стили применялись ко всем текстовым полям на сайте, добавьте их в стилевой файл страницы. Обратите внимание, что модифицировать инлайн стили, непосредственно присоединенные к элементу, может быть труднее:
/* Поля, размер которых не должен меняться */
textarea.no-resize {
resize: none;
}
Используйте правило !important
только при крайней необходимости, чтобы ваш стиль не мешал другим:
/* Ясно указываем, что изменение размера отключено. Точка */
textarea {
resize: none !important;
}
Управление контентом, выходящим за границы
При отключении изменения размера следует убедиться, что контент не выходит за пределы поля. В этом поможет свойство overflow: auto;
:
/* Если текст не помещается, появится полоса прокрутки */
textarea {
resize: none;
overflow: auto;
}
Визуализация
Воображаем текстовое поле как сад, окруженный забором:
Перед: 🏠↔️🌳 (Забор можно передвигать, сад может расширяться)
После отключения изменения размера сад остается неизменным:
textarea {
resize: none;
}
В итоге ваш сад всегда будет выглядеть привлекательно:
После: 🏠🔒🌳 (Забор защелкнут на замок, размер сада фиксирован)
Сохранение соответствия макету
Чтобы текстовое поле гармонично смотрелось в общем дизайне, вы можете установить его ширину в процентах от родительского контейнера, используя width: 100%;
:
/* Текстовое поле соответствует размерам родительского элемента */
textarea {
width: 100%;
resize: none;
}
Совместимость с различными браузерами
Не забывайте проверять, как ваш код себя ведет в разных браузерах, чтобы обеспечить одинаковое восприятие сайта на любом устройстве.
Учет доступности
При ограничении возможности изменения размера учитывайте удобство пользовательского интерфейса – иногда незначительные корректировки значительно улучшают его.
Полезные материалы
- resize | CSS-Tricks — Подробно о свойстве CSS 'resize' и его применении.
- resize – CSS: Cascading Style Sheets | MDN — Официальная документация по свойству 'resize' с примерами от MDN.
- CSS resize Property – CSS Portal — Всесторонний путеводитель по свойству 'resize' в CSS.
- CSS resize Property — Обучающий материал по свойству
resize
с примерами на W3Docs. - Struct Hack with Array of Struct Type – Stack Overflow — Статья о массивах и структурах в языке C для любознательных разработчиков.
- Build Glass Website with HTML and CSS Tutorial – YouTube — Видеоурок, освещающий техники CSS.
- Just a moment... — Наглядный пример страницы с ограниченным по размеру текстовым полем на CodePen.