सीएसएस शब्द चल तत्वों

Question

मैं एक निश्चित-चौड़ाई एक बूटस्ट्रैप nav-list जहां कुछ सूची तत्वों को दाईं ओर संरेखित लेबल से मिलकर साइडबार है के साथ रैप।

उदाहरण के लिए:

<li> 
    <a href="#">abc_test_randomrandom</a> 
    <span class="pull-right label">0000</span> 
</li> 

बहरहाल, यह करता है, तो लिंक लंबा है काम नहीं करता। यह पूरी लाइन को भरने के लिए फैलता है, और लेबल को अगली पंक्ति में धक्का देता है।

मैं इस व्यवहार को प्रदर्शित करने के लिए एक jsFiddle demo ऊपर डाल दिया। संपादित करें: और अब gist भी।

वांछित व्यवहारऔर 0000 उसी पंक्ति पर है, यदि आवश्यक हो तो अगली पंक्ति में लंबी स्ट्रिंग रैपिंग के साथ। क्या यह संभव है?

Answer 1

मुझे लगता है कि Praveen's solution वास्तव में एक बेहतर कार्यान्वयन है, लेकिन व्यवहार मूल रूप से अनुरोध किया है, display: inline-block, word-wrap: break-word हो और width फिक्स यह स्थापित करने के लिए।

li a {width: 70%; display: inline-block; word-wrap: break-word;} 

Answer 2

हां। text-ellipsis के साथ अतिरिक्त फिक्स्ड चौड़ाई का उपयोग करें और overflow: hidden; दें।

li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;} 
li span {width: 40%; display: inline-block;} 

मैं jsFiddle को खोलने में असमर्थ हूं। तो सही मुद्दा नहीं देख सका।

Answer 3

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

संपादित करें: मैं आपके जेएसफ़िल्ड को लोड करने में सक्षम था।

आप अपने HTML में एंकर से पहले फैला ले जाएँ और इस सीएसएस जोड़ते हैं, तो यह काम करता है। यदि आपका टेक्स्ट सचमुच रिक्त स्थान के बजाय अंडरस्कोर होने जा रहा है तो आपको उस शब्द-रैप सीएसएस की आवश्यकता होगी जिसे आपने अपने उत्तर में बताया था।

इस के लाभ यह सीएसएस हैक्स की आवश्यकता नहीं है नहीं है (यानी प्रदर्शन के लिए: इनलाइन-ब्लॉक) IE के पुराने संस्करणों में काम करने के लिए, कि अगर अपनी परियोजना के लिए एक चिंता का विषय है।

.nav-list a { display: block; margin-right: 30px; }