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

जब एक चयन बॉक्स के भीतर विकल्प बॉक्स की चौड़ाई से आगे बढ़ते हैं, तो यह एक अव्यवस्था पैदा कर सकता है और बोझिल उपस्थिति. इस समस्या को हल करने के लिए, हम विकल्पों की चौड़ाई को अनुकूलित करने और किसी भी अतिरिक्त पाठ को छोटा करने के लिए सीएसएस और जावास्क्रिप्ट दोनों को नियोजित कर सकते हैं।

सीएसएस दृष्टिकोण:

जबकि अकेले सीएसएस नहीं है विकल्पों की चौड़ाई निर्धारित करने के लिए पर्याप्त, हम इसका उपयोग चयन बॉक्स की चौड़ाई तय करने के लिए कर सकते हैं। चयनित तत्व के लिए चौड़ाई निर्धारित करने से, विकल्प उस सीमा के भीतर सीमित हो जाएंगे। इसके अतिरिक्त, हम बॉक्स की चौड़ाई से अधिक के किसी भी विकल्प को छुपाने के लिए ओवरफ्लो कर सकते हैं, जिससे लंबे विकल्पों पर इलिप्सिस प्रभाव पड़ता है।

select {
    width: 250px;
}

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

जावास्क्रिप्ट दृष्टिकोण:

विकल्पों की चौड़ाई पर बेहतर नियंत्रण के लिए, हम जावास्क्रिप्ट की ओर रुख कर सकते हैं। निम्नलिखित कोड स्निपेट चयन बॉक्स की चौड़ाई से मेल खाने के लिए विकल्पों को गतिशील रूप से आकार देता है और टेक्स्ट-ओवरफ़्लो का उपयोग करके किसी भी ओवरफ़्लो टेक्स्ट को छोटा करता है: एलिप्सिस:

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

संयुक्त दृष्टिकोण:

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