Установить ширину при выборе windows выбора
На снимке ширина опции больше, чем в поле выбора. Я хочу установить ширину этих параметров так же, как и поле выбора, и для этих больших опций установите переполнение текста как многоточие. Любая помощь будет оценена по достоинству.
Вот что я пробовал:
- Как стилизовать элемент опции select tag?
- Установите опцию выбора «selected», по значению
- Заполнение выпадающего списка HTML в JSP со значениями, полученными из базы данных в Servlet
- Событие Fire каждый раз, когда элемент DropDownList выбран с помощью jQuery
- Форма HTML: опция Select-Option vs Datalist-Option
Html
Select your University Bangladesh University of Engineering and Technology Mawlana Bhashani Science and Technology University Css
select, option { width: 250px; } option { overflow: hidden; white-sapce: no-wrap; text-overflow: ellipsis; }
Скрипт : https://jsfiddle.net/3bsbcqfz/
- Как очистить все параметры в раскрывающемся списке?
- Как создать стиль только с CSS?
- Заполните раскрывающийся список при выборе другого выпадающего списка
- Каков наилучший способ добавить опции для выбора из JS-объекта с помощью jQuery?
- Скрыть параметры в списке выбора с помощью jQuery
- Можно ли создать поле выбора?
- Как resize шрифта для опции выбора?
- Как изменить выбранный HTML-вариант с помощью JavaScript?
Я попытался найти решение из css. Но я не смог этого сделать. Неважно, я написал для него простой код javascript. Это может сделать что-то для этого.
function shortString() { var shorts = document.querySelectorAll('.short'); if (shorts) { Array.prototype.forEach.call(shorts, function(ele) { var str = ele.innerText, indt = '...'; if (ele.hasAttribute('data-limit')) { if (str.length > ele.dataset.limit) { var result = `${str.substring(0, ele.dataset.limit - indt.length).trim()}${indt}`; ele.innerText = result; str = null; result = null; } } else { throw Error('Cannot find attribute \'data-limit\''); } }); } } window.onload = function() { shortString(); };
select { width: 250px; } option { width: 250px; }
Наконец, я придумал решение, создав Custom Drop-down, используя ul, li. Вот решение:
FIDDLE DEMO
HTML
Select - Select
- Bangladesh University of Engineering and Technology
- Mawlana Bhashani Science and Technology University
CSS
div.custom-select { height: 40px; width: 400px; position: relative; background-color: #F2F2F2; border: 1px solid #E4E4E4; } div.selected { width: inherit; cursor: pointer; line-height: 20px; display: inline-block; } div.selected > .text { padding: 10px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } div.select-box { display: none; width: 100%; z-index: 10029; position: absolute; border-radius: 3px; box-shadow: 0 8px 20px #000000; box-shadow: 0 8px 20px rgba(0,0,0,.35) } div.select-box.active { display: block; } div.select-box.drop-up { top: auto; bottom: 100%; } ul.select-list { margin: 0; padding: 10px; list-style-type: none; } ul.select-list li { cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ul.select-list li:hover, ul.select-list li.active { background-color: #999999; }
JavaScript
$(document).ready(function (){ $("div.selected").on("click", function () { var hasActiveClass = $("div.select-box").hasClass("active"); if (hasActiveClass === false) { var windowHeight = $(window).outerHeight(); var dropdownPosition = $(this).offset().top; var dropdownHeight = 95; // dropdown height if (dropdownPosition + dropdownHeight + 50 > windowHeight) { $("div.select-box").addClass("drop-up"); } else { $("div.select-box").removeClass("drop-up"); } var currentUniversity = $(this).find('text').text().trim(); $.each($("ul.select-list li"), function () { var university = $(this).text().trim(); if (university === currentUniversity) $(this).addClass("active"); else $(this).removeClass("active"); }); } $("div.select-box").toggleClass("active"); }); $("ul.select-list li").on("click", function () { var university = $(this).html(); $("span.text").html(university); $("div.select-box").removeClass("active"); }); $("ul.select-list li").hover(function () { $("ul.select-list li").removeClass("active"); }); $(document).click(function (event) { if ($(event.target).closest("div.custom-select").length < 1) { $("div.select-box").removeClass("active"); } }); });