Imposta larghezza all’opzione della casella di selezione

inserisci la descrizione dell'immagine qui

Nell’immagine, la larghezza dell’opzione è maggiore della casella di selezione. Voglio impostare la larghezza di queste opzioni allo stesso modo della casella di selezione e per quelle opzioni più grandi impostare l’overflow del testo come ellissi. Qualsiasi aiuto sarebbe apprezzato.

Ecco cosa ho provato:

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; } 

Fiddle : https://jsfiddle.net/3bsbcqfz/

Ho provato a trovare una soluzione da css. Ma non sono riuscito a farlo. Non importa, ho scritto un semplice codice javascript per questo. Questo è ansible farlo qualcosa per questo.

 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; } 
  

Finalmente, ho trovato la soluzione creando il menu a discesa personalizzato usando ul, li. Ecco la soluzione:

DEMO FIDDLE

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"); } }); });