Как выровнять текст по ширине?
Выравниванием по ширине называется такой способ форматирования текста, когда левый и правый края текста выравниваются по вертикальным линиям (рис. 1).
Рис. 1. Выравнивание текста по ширине
Для выравнивания правого края текста браузер добавляет пустые промежутки между слов, что иногда смотрится неаккуратно.
Чтобы выровнять текст по ширине ему достаточно добавить свойство text-align со значением justify , как показано в примере 1.
Пример 1. Использование text-align
В данном примере мы используем класс text-justify , который при добавлении его к любому элементу выравнивает текст по ширине.
Последняя строка нашего текста по умолчанию остаётся выровненной по левому краю. Для управления поведением последней строки есть отдельное свойство text-align-last. К примеру, значение right выравнивает по правому краю, а center — по центру (пример 2).
Пример 2. Использование text-align-last
См. также
- text-align
- text-align-last
- Свойства текста в CSS
Как сделать auto width для поля input?
Правда, ширина только увеличивается, а не уменьшается, и точно работает только для моноширинных шрифтов, у которых проставлен font-size, соответствующий ширине символа в 8px. Я бы всё-таки рекомендовал написать небольшой плагин для этого, основанный, например, на невидимом div с такими же параметрами шрифта как у input.
teotlu: подправил, чтобы работало и при удалении. Вообще погрешность не большая, если шрифт не дюже заковыристый.
Многострочный текст
Этот элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.
Синтаксис создания поля следующий.
Между тегами можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| cols | Ширина поля в символах. |
| disabled | Блокирует доступ и изменение элемента. |
| maxlength | Максимальное число символов текста, которое можно ввести. |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| readonly | Устанавливает, что поле не может изменяться пользователем. |
| rows | Высота поля в строках текста. |
| wrap | Параметры переноса строк. |
Создание поля многострочного текста показано в примере 6.1.
Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).
Пример 1. Текстовое поле
HTML5 IE Cr Op Sa Fx
Текстовое поле Введите ваш отзыв:
Результат примера в браузере Chrome показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
Дополнительно поле может находиться в двух состояниях — блокированном и только для чтения. Спецификация HTML5 не определяет вид поля и текста в подобных состояниях, поэтому браузеры по-разному его отображают (рис. 2).
 |
 |
| Internet Explorer | Opera |
 |
 |
| Chrome | Firefox |
Текст внутри блокированного поля нельзя выделить и добавить, также содержимое такого поля не отправляется формой на сервер. Текст внутри поля для чтения доступен для копирования, но его нельзя отредактировать. В примере 2 показан способ создания поля для чтения.
Пример 2. Поле для чтения
HTML5 IE Cr Op Sa Fx
Поле для чтения Учтите, что поле для чтения по своему виду не отличается от обычного текстового поля, но пользователь не сможет в него ничего добавить. Так что используйте его осмотрительно, чтобы не вводить людей в заблуждение.
Как сделать чтобы input растягивался по тексту
Поле представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Между тегами можно поместить любой текст, который будет отображаться внутри поля.
Синтаксис
Атрибуты
accesskey Переход к полю с помощью сочетания клавиш. autofocus Автоматическое получение фокуса. cols Ширина поля в символах. disabled Блокирует доступ и изменение элемента. form Связывает текстовое поле с формой по её идентификатору. maxlength Максимальное число введенных символов. name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. placeholder Указывает замещающийся текст. readonly Устанавливает, что поле не может изменяться пользователем. required Обязательное для заполнения поле. rows Высота поля в строках текста. tabindex Порядок перехода между элементами при нажатии на клавишу Tab. wrap Параметры переноса строк.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег TEXTAREA Введите ваш отзыв: