दिलचस्प पोस्ट
समूह द्वारा एक चर योग कैसे करें? जावास्क्रिप्ट XMLHttpRequest JsonP का उपयोग करते हुए क्या चाबी का गुच्छा वस्तु अद्वितीय बनाता है (आईओएस में)? सीडीआई 1.1 में एनोटेट की गई बीन डिस्कवरी मोड का अर्थ अजगर में पीडीएमफ़ोनर का उपयोग कर पीडीएफ फाइल से पाठ निकालना? ipython गलत अजगर संस्करण पढ़ता है ब्राउज़र में छवि में एसवीजी कनवर्ट करें (जेपीईजी, पीएनजी, आदि) दृश्य स्टूडियो (2008) में कोई अन्य कस्टम फ़ाइल पर एक कस्टम निर्भर फाइल करने का एक तरीका है? जावा के साथ आरएआर अभिलेखागार स्टैक्ड बार चार्ट एक प्रोग्राम को अपने मानक आउटपुट को फ़्लश करने के लिए मजबूर करते हुए पुनः निर्देशित किया गया SSL प्रमाणपत्र विश्वसनीय नहीं है – केवल मोबाइल पर क्या कोई रनटाइम-निर्धारित नाम के साथ एक समारोह बनाने के लिए कोई गैर-eval तरीका है? jQuery के एक्सएमएल त्रुटि 'नहीं' एक्सेस-कंट्रोल-अनुमति-उत्पत्ति 'हैडर अनुरोधित संसाधन पर मौजूद है।' मैं सी ++ 11 में एक धागा कैसे समाप्त कर सकता हूं?

ड्रॉपडाउन बक्से में अतिप्रवाह टेक्स्ट के लिए अंडाकार

मैं अपने ड्रॉपडाउन बक्से में से एक की चौड़ाई तय कर रहा हूं (हाँ, मुझे पता है कि ऐसा करने से क्रॉस-ब्राउज़र मुद्दे हैं)

क्या एक गैर-जे एस तरीका है जो अतिप्रवाह पाठ को खत्म करने और अंडाकार जोड़ता है? पाठ-ओवरफ्लो: एल्िपिसिस <select> तत्वों (कम से कम क्रोम में) के लिए काम नहीं करता है।

यहाँ उदाहरण: http://jsfiddle.net/t5eUe/

Solutions Collecting From Web of "ड्रॉपडाउन बक्से में अतिप्रवाह टेक्स्ट के लिए अंडाकार"

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

ऐसा लगता है कि अधिकांश ऑपरेटिंग सिस्टम एलीपिस के बिना चयनित विकल्प बंद कर देते हैं यदि आप पाठ काटते हैं तो आप कैसे बदल सकते हैं, यह अजीब लगेगा क्योंकि ये नहीं है कि बाकी बचे ऑपरेटिंग सिस्टम में कैसे काम करते हैं।

यदि यह आप कीड़े है, तो आप एक अनुकूलन योग्य प्रतिस्थापन का उपयोग कर सकते हैं जैसे चुना गया , जो मूल select से अलग दिखता है।

या, एक प्रमुख ऑपरेटिंग सिस्टम या ब्राउज़र के खिलाफ एक बग फ़ाइल हम सभी जानते हैं, जिस तरह से पाठ का select में कट जाता है, वह साल के पुराने निरीक्षण का परिणाम हो सकता है, जो सभी ने प्रतिलिपि बनाई, और यह एक बदलाव के लिए समय हो सकता है

यदि आपको यह प्रश्न मिल रहा है क्योंकि आपके पास अपने चयन बॉक्स पर एक कस्टम तीर है और पाठ आपके तीर पर जा रहा है, तो मुझे एक ऐसा हल मिल गया जो कुछ ब्राउज़रों में काम करता है। बस कुछ पैडिंग जोड़, select करने के select , दाएं तरफ।

पहले:

यहां छवि विवरण दर्ज करें

बाद:

यहां छवि विवरण दर्ज करें

सीएसएस:

 select { padding:0 30px 0 10px !important; -webkit-padding-end: 30px !important; -webkit-padding-start: 10px !important; } 

आईओएस padding गुणों की उपेक्षा करता है लेकिन इसके बजाय- -webkit- गुणों का उपयोग करता है

http://jsfiddle.net/T7ST2/4/

सरलतम समाधान केवल HTML में वर्णों की संख्या को सीमित करने के लिए हो सकता है रेल का एक छोटा सा स्ट्रिंग (स्ट्रिंग, लम्बाई) हेल्पर है, और मुझे पूरा यकीन है कि जिस भी बैकएंड का आप उपयोग कर रहे हैं वह कुछ समान है।

क्रॉस-ब्राउज़र समस्याओं के कारण आप पहले से ही चुनिंदा बक्से की चौड़ाई से परिचित हैं, मुझे लगता है कि यह सबसे सरल और कम से कम त्रुटि प्रवण विकल्प है।

 <select> <option value="1">One</option> <option value="100">One hund...</option> <select> 

आप इसका उपयोग कर सकते हैं:

 select { width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } select option { width:100px; text-overflow:ellipsis; overflow:hidden; } div { border-style:solid; width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } 

quirksmode में 'टेक्स्ट ओवरफ्लो' संपत्ति का अच्छा वर्णन है, लेकिन आपको कुछ अतिरिक्त गुणों जैसे 'सफेद-स्पेस: आइपॉड' को लागू करने की आवश्यकता हो सकती है

जब तक मैं 100% नहीं हूं कि यह एक चुनिंदा ऑब्जेक्ट में कैसे व्यवहार करेगा, यह पहले की कोशिश करने के लायक हो सकता है:

http://www.quirksmode.org/css/textoverflow.html

आप इस jQuery फ़ंक्शन के बजाय प्लस बूटस्ट्रैप टूलटिप का उपयोग कर सकते हैं

 function DDLSToolTipping(ddlsArray) { $(ddlsArray).each(function (index, ddl) { DDLToolTipping(ddl) }); } function DDLToolTipping(ddlID, maxLength, allowDots) { if (maxLength == null) { maxLength = 12 } if (allowDots == null) { allowDots = true } var selectedOption = $(ddlID).find('option:selected').text(); if (selectedOption.length > maxLength) { $(ddlID).attr('data-toggle', "tooltip") .attr('title', selectedOption); if (allowDots) { $(ddlID).prev('sup').remove(); $(ddlID).before( "<sup style='font-size: 9.5pt;position: relative;top: -1px;left: -17px;z-index: 1000;background-color: #f7f7f7;border-radius: 229px;font-weight: bold;color: #666;'>...</sup>" ) } } else if ($(ddlID).attr('title') != null) { $(ddlID).removeAttr('data-toggle') .removeAttr('title'); } } 

थोड़ा सा सरलीकृत, लेकिन सभी ब्राउज़रों में मेरे लिए काम किया:

 select { font-size: 0.9rem }