बहुत लंबी लाइनों को लपेटने के बिना साइड-बाय-साइड परिभाषा सूची

Question

मेरे पास <dl> है जिसमें <dt> ग्रंथ और संभवतः लंबे <dd> ग्रंथ हैं। लेआउट जहां मैं उन्हें उपयोग कर रहा हूँ में मैं उन्हें चाहते हैं पक्ष-साथ प्रदर्शित करने के:

/==============\ 
|DT DD........| 
|DT DD........| 
|DT DD........| 
\==============/ 

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

समस्या दिखा फिडल: http://jsfiddle.net/ThiefMaster/fXr9Q/4/

वर्तमान सीएसएस:

dl { border: 1px solid #000; margin: 2em; width: 200px; overflow: hidden; } 
dt { float: left; clear: left; width: 50px; color: #f00; } 
dd { float: left; color: #0a0; white-space: nowrap; } 

Answer 1

अद्यतन: मैं पहली बार अपने पूरे सवाल पढ़ा जाना चाहिए था।

(जैसा कि मैं पहले से ही ऊपर उल्लेख) इस संपत्ति का उपयोग कर शुरुआती के लिए <dd>

http://jsfiddle.net/fXr9Q/26/

एक संभावित समस्या पर float:left; उतार कि वे यह मान है कि स्थापना के खाली स्थान के: एक तत्व पर nowrap उस तत्व को अगली पंक्ति में जाने से रोक देगा यदि यह फ़्लोट किए गए बक्से के समूह का हिस्सा है। सफेद-अंतरिक्ष संपत्ति, तथापि, केवल इनलाइन तत्वों के तत्व करने के लिए अपने आवेदन किया के अंदर लागू होगा, और ब्लॉक तत्वों या तत्व ही की रिक्ति को प्रभावित नहीं करेगा।

http://www.impressivewebs.com/css-white-space/

---

पुरानी

dl और dt, पर आप की स्थापना की है के रूप में चौड़ाई इस ऐड dd रहे हैं:

dd{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 150px; 
} 

http://jsfiddle.net/fXr9Q/15/

जागरूक रहें - यह CSS3 है - पुराने ब्राउज़र पर काम नहीं करेगा - यह आपके लिए मूल्यांकन करना है कि यह एक समस्या है या नहीं - अधिकतर समय मुझे पुराने ब्राउज़र को शैलियों का थोड़ा बुरा चुनने पर कोई फर्क नहीं पड़ता ।

Answer 2

आप चौड़ाई डीटी और डीडी पर दोनों सेट की जरूरत नहीं है।

बस डीटी चौड़ाई देते हैं, और बाईं तैरने लगते हैं। छिपा को डीडी के अतिप्रवाह गुण को सेट है, यह सभी उपलब्ध शेष अंतरिक्ष फिटिंग करने देगा।

फिर white-space: nowrap; और टेक्स्ट ओवरफ्लो: इलिप्सिस; जब भी टेक्स्ट बहुत लंबा होता है तो यह इलिप्सिस जोड़ना फैंसी बना देगा।

यह जाने का रास्ता है: http://jsfiddle.net/fLPej/