चयन बॉक्स विकल्पों की चौड़ाई को नियंत्रित करना

HTML में, चयनित तत्व और उसके चाइल्ड विकल्प तत्वों दोनों के लिए शैली विशेषताओं को लागू करके, यह है यह सुनिश्चित करने के लिए कि यह चयनित बॉक्स की चौड़ाई से मेल खाता है, प्रत्येक विकल्प की चौड़ाई निर्दिष्ट करना संभव है। हालाँकि, केवल CSS के साथ इसे प्राप्त करना पर्याप्त नहीं हो सकता है।

एक समाधान में विकल्प की चौड़ाई को और अधिक नियंत्रित करने और आवश्यक होने पर टेक्स्ट इलिप्सिस को सक्षम करने के लिए जावास्क्रिप्ट को शामिल करना शामिल है। प्रदान किया गया जावास्क्रिप्ट कोड एक शॉर्टस्ट्रिंग फ़ंक्शन पेश करता है जो .शॉर्ट क्लास और डेटा-लिमिट विशेषता वाले विकल्प तत्वों के भीतर टेक्स्ट को गतिशील रूप से समायोजित करता है।

यहां इस समाधान को कार्यान्वित करने का तरीका बताया गया है:

Select your UniversityBangladesh University of Engineering and TechnologyMawlana Bhashani Science and Technology University

select {
  width: 250px;
}

option {
  width: 250px;
}

function shortString(selector) {
  const elements = document.querySelectorAll(selector);
  const tail = '...';
  if (elements && elements.length) {
    for (const element of elements) {
      let text = element.innerText;
      if (element.hasAttribute('data-limit')) {
        if (text.length > element.dataset.limit) {
          element.innerText = `${text.substring(0, element.dataset.limit - tail.length).trim()}${tail}`;
        }
      } else {
        throw Error('Cannot find attribute \'data-limit\'');
      }
    }
  }
}

window.onload = function() {
  shortString('.short');
};

यह दृष्टिकोण सुनिश्चित करता है कि विकल्प की चौड़ाई चयनित बॉक्स की चौड़ाई के समान है, और जब विकल्प टेक्स्ट निर्दिष्ट सीमा से अधिक हो जाता है, तो अतिरिक्त टेक्स्ट को इलिप्सिस से बदल दिया जाता है।