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

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

CSS समाधान:

select, option {
    width: 250px;
}

option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

चयन बॉक्स और उसके विकल्पों दोनों की चौड़ाई 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');
};

यह फ़ंक्शन आपको डेटा-सीमा विशेषता का उपयोग करके प्रत्येक विकल्प के लिए चौड़ाई सीमा परिभाषित करने की अनुमति देता है। सीमा से अधिक वाले विकल्पों को छोटा कर दिया जाएगा और उनके साथ दीर्घवृत्त (...) लगा दिया जाएगा।