Как сделать option по ширине как select?

#html #css #веб_программирование

#wgtmsr{
 width:150px;   
}

#wgtmsr option{
 width:100px;   
}

Kg
Gm
Pound
Metric adwd wad wad awd awd awd wad w adw ton
Litre
Ounce





Как сделать так, чтобы слово, которое больше по ширине делает опцию чем селект, переносилось
на вторую строку(то-есть не выходило за рамки род. селекта)
    

Ответы

Ответ 1

Одним css - никак. Либо плагин использовать, либо самому скрипт написать.

Например я таким иногда пользуюсь:



$('.select').each(function(){
		// Variables
		var $this = $(this),
			selectOption = $this.find('option'),
			selectOptionLength = selectOption.length,
			selectedOption = selectOption.filter(':selected'),
			dur = 500;

		$this.hide();
		// Wrap all in select box
		$this.wrap('
');
		// Style box
		$('
',{
			class: 'select__gap',
			text: 'Please select' //Placeholder
		}).insertAfter($this);
		
		var selectGap = $this.next('.select__gap'),
			caret = selectGap.find('.caret');
		// Add ul list
		$('
',{
			class: 'select__list'
		}).insertAfter(selectGap);		

		var selectList = selectGap.next('.select__list');
		// Add li - option items
		for(var i = 0; i < selectOptionLength; i++){
			$('
',{
				class: 'select__item',
				html: $('',{
					text: selectOption.eq(i).text()
				})				
			})
			.attr('data-value', selectOption.eq(i).val())
			.appendTo(selectList);
		}
		// Find all items
		var selectItem = selectList.find('li');

		selectList.slideUp(0);
		selectGap.on('click', function(){
			if(!$(this).hasClass('on')){
				$(this).addClass('on');
				selectList.slideDown(dur);

				selectItem.on('click', function(){
					var chooseItem = $(this).data('value');

					$('select').val(chooseItem).attr('selected', 'selected');
					selectGap.text($(this).find('span').text());

					selectList.slideUp(dur);
					selectGap.removeClass('on');
				});
				
			} else {
				$(this).removeClass('on');
				selectList.slideUp(dur);
			}
		});		

	});
/* #wgtmsr{
 width:150px;  
}

#wgtmsr option{
 width:100px;   
} */


/* Стилизация селекта для примера: */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/* Выпадающий список: */
.select ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  border: 1px solid #0095ff;
  width:100px;
}

/* Пункт списка: */
.select ul li {
  padding: 5px;
}

/* Наведение на пункт списка: */
.select ul li:hover {
  background: #0095ff;
  color: #fff;
}


/* Выбор option "Please Select": */
.select__gap {
  position: relative;
  padding: 5px;
  width:150px;
  border: 1px solid #ccc;
  padding-right: 10px;
}

/* Стрелочка: */
.select__gap:after {
  content: '';
  position: absolute;
  right: 5px;
  top: 10px;
  border-top: 5px solid #000;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

  

  Kg
  Gm
  Pound
  Metric adwd wad wad awd awd awd wad w adw ton
  Litre
  Ounce