Html select text width

HTML тег

HTML тег используется для определения выпадающего списка, который появляется при нажатии мышью на элемент формы и позволяет пользователю выбрать один из вариантов.

Для определения доступных вариантов выбора используется тег , вложенный в тег .

По умолчанию первый пункт в списке отображается как выбранный. Для изменения предопределенного варианта используется атрибут selected .

Для объединения нескольких вариантов в одну группу используется тег . Содержимое тега выглядит как заголовок жирного начертания.

Внешний вид списка зависит от использования атрибута size , который устанавливает высоту списка. Ширина списка зависит от длины текста в теге . Ширину можно также задать с помощью CSS стилей.

Если необходимо отправлять данные на сервер, либо обращаться к списку через скрипты, то тег необходимо поместить внутрь формы (тег ).

Синтаксис

Содержимое элемента заключается между открывающим () и закрывающим () тегами. Закрывающий тег обязателен

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> form action="action_form.php" target="_top"> select> option value="books">Книги option> option value="html">HTML option> option value="css">CSS option> option value="php">PHP option> option value="js">JavaScript option> select> form> body> html>

Результат

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> select> optgroup label="Книги"> option value="html">HTML option> option value="css">CSS option> optgroup> optgroup label="Сниппеты"> option value="git">Git option> option value="java">Java option> optgroup> select> body> html>

В этом примере мы использовали тег для сбора опций в группе.

Результат

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Аэропорт вылета: p> form action="action_form.php" target="_top"> input type = "text" list = "airports" name="airports"> datalist id = "airports"> option value = "Санкт-Петербург"> option value = "Краснодар"> option value = "Москва"> option value = "Новосибирск"> datalist> input type = "submit" value = "подтвердить"> form> body> html>

Результат

В этом примере мы использовали тег , так как нам необходимо отправить данные на сервер.

Атрибуты

Атрибуты	Значение	Описание
autofocus	autofocus	Определяет, что список должен получить фокус при загрузке страницы.
disabled	disabled	Указывает, что список не активен, то есть пользователь не сможет взаимодействовать с ним.
form	form_id	Определяет форму с которой связан элемент. Не поддерживается в Firefox.
multiple	multiple	Указывает, что за один раз можно выбрать несколько вариантов. Способ выбора нескольких вариантов зависит от операционной системы: в Windows необходимо удерживать нажатой клавишу CTRL, в Mac — клавишу CMD.
name	name	Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript.
required	required	Указывает, что выбор значения является обязательным.
size	number	Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
• CSS свойство font-size задает размер щрифта.
• CSS свойство font-weight устанавливает насыщенность шрифта.
• CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
• CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

Стили форматирования текста для тега :

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

Установить ширину выпадающего элемента в вариантах выпадающего списка HTML

Я работаю над сайтом, который включает автоматическое заполнение окна выбора с помощью PHP script. Все это прекрасно работает, но проблема заключается в том, что то, что я использую для заполнения текстового поля, имеет очень длинные заголовки (это статьи журналов и заголовки презентаций). Выпадающий квадрат простирается до ширины самого длинного элемента, который простирается от края экрана, поэтому сделать полосу прокрутки невозможно. Я пробовал различные методы, пытаясь вручную установить раскрывающийся список с помощью CSS на определенную ширину, но до сих пор безрезультатно. Лучшее, что я сделал, чтобы установить поле «Выбор» на определенную ширину, но выпадающее меню само по себе намного шире.

Любые советы по этому поводу будут очень признательны.

Оказывается, что следующая строка CSS работает во всех основных браузерах, кроме Google Chrome (это то, что я тестировал в этой странице). Если решение для Chrome известно, об этом было бы полезно узнать.

ОТВЕТЫ

Ответ 1

Вы можете стилизовать (хотя и с некоторыми ограничениями) фактические элементы с помощью селектора option :

Таким образом вы не только сдерживаете раскрывающийся список, но и все его элементы.

Ответ 2

Я считаю, что лучший способ обработки длинных выпадающих списков — разместить его в контейнере с фиксированной шириной div и использовать ширину: auto в теге select. Большинство браузеров будут содержать раскрывающийся список в div, но когда вы нажмете на него, он будет расширяться, чтобы отобразить полное значение параметра. Он не работает с IE Explorer, но есть исправление (как всегда, необходимо с IE). Ваш код будет выглядеть примерно так.

div.dropdown_container < width:10px; >select.my_dropdown < width:auto; >/*IE FIX */ select#my_dropdown < width:100%; >select:focus#my_dropdown

Ответ 3

 Please select an item Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more  

// Shorten select option text if it stretches beyond max-width of select element $.each($('.shortenedSelect option'), function(key, optionElement) < var curText = $(optionElement).text(); $(this).attr('title', curText); // Tip: parseInt('350px', 10) removes the 'px' by forcing parseInt to use a base ten numbering system. var lengthToShortenTo = Math.round(parseInt($(this).parent('select').css('max-width'), 10) / 7.3); if (curText.length >lengthToShortenTo) < $(this).text('. ' + curText.substring((curText.length - lengthToShortenTo), curText.length)); >>); // Show full name in tooltip after choosing an option $('.shortenedSelect').change(function() < $(this).attr('title', ($(this).find('option:eq('+$(this).get(0).selectedIndex +')').attr('title'))); >); 

Работает отлично. У меня была такая же проблема. Проверьте этот JSFiddle http://jsfiddle.net/jNWS6/426/

Ответ 4

• Определить максимальную длину строки
• Клип строка
• (необязательно) добавить горизонтальный эллипс

Альтернативное решение: элемент выбора в вашем случае (только гадание) — элемент управления с одним выбором, и вместо этого вы можете использовать группу переключателей. Тогда вы могли бы лучше стилизовать стиль. Если у вас есть выбор [@multiple], вы можете сделать то же самое с группой флажков, потому что оба они могут рассматриваться как элемент управления с несколькими вариантами выбора.

Ответ 5

Ответ 6

u может просто использовать атрибут width для «style» для изменения длины раскрывающегося окна

Ответ 7

var i = 0; $("#container > option").each(function() < if($(this).val().length >i) < i = $(this).val().length; console.log(i); console.log($(this).val()); >>); 

Источник

Controlling the width of SELECT lists
= Index DOT Html by Brian Wilson =

The HTML standards don’t allow for a way to control this width. CSS, on the other hand, would be perfect for controlling this, but historical support for CSS on form controls is rather weak.

Solution 1: Using   to pad OPTION element content
Support Key: [IE1|M2A1|N1|O2.1|S1] This solution can work rather well — non-breaking spaces are treated as displayable content, so these can be used to add crude right and left «padding» widths to the SELECT control. The one downside of this method is that it is difficult to achieve a precise width for the control.

Solution 2: Using a WIDTH attribute on the SELECT control
Support Key: [ IE | M |N4-4.x| O | S ] This proprietary attribute was added in Netscape 4.x, and has been retired in Netscape 6.x, but this attribute takes as a value a positive integer representing a pixel width for the control. The disadvantage here is that only Netscape 4.x supports it.

Solution 3: CSS on the SELECT control
Support Key: [IE4| M |N6B1|O5|S1] This is by far the best solution, using the ‘width’ CSS property — and it has the widest support.

Recommendation
Since Netscape 4 has only the proprietary attribute that will give the desired effect, it will not hurt anything to combine the use of CSS and the WIDTH attribute.

Источник