इलिप्सिस ओवरफ्लो के साथ इनलाइन विस्तार हेडर कैसे बनाएं - एचटीएमएल, सीएसएस

मुझे निम्नलिखित लेआउट मिला है:

<article>
<h3><a>...</a></h3>
<h3><a>...</a></h3>
</article>

पहले हेडर में डायनामिक कंटेंट होता है, दूसरे में एक निश्चित चौड़ाई सेट होता है।

मैं "हेडर को इनलाइन होना पसंद करता हूं, और जब पहले वाले का कंटेंट बढ़ता है, तो इसके लिए दोनों हेडर्स की चौड़ाई 100% तक बढ़ जाती है, और फिर ओवरफ्लो टेक्स्ट को एलिप्सिस करने के लिए।

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

अनुलेख: दुर्भाग्य से यह संभव के रूप में कई पुराने ब्राउज़रों का समर्थन करने के लिए, वापस करने के लिए I.E. 6 सबसे अच्छा (/ बारफ) होगा, लेकिन जो भी समाधान जितना संभव हो सके उतना पीछे पहुंचता है सबसे मूल्यवान होगा। धन्यवाद!

उत्तर:

जवाब के लिए 2 № 1

अगर मैं प्रश्न को सही समझ गया, तो यह आसानी से प्राप्त हो सकता है लचीला बक्से:

article {
display: inline-flex;
width: 100%;
}
article > h3:nth-child(1) {
flex: 1;
}
article > h3:nth-child(2) {
flex: 0 0 150px;
}
a {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}

JSBin


जवाब के लिए 0 № 2

अगर मैं इस मुद्दे को ठीक से समझ रहा हूं, तो निम्नलिखित JSField के पास समाधान हो सकता है: http://jsfiddle.net/modenadude/QntUm/2/

कोड:

  • दोनों रखता है <h2>इनलाइन है
  • अगर पहले की चौड़ाई <h2> दूसरे की चौड़ाई की तुलना में व्यापक हो जाता है <h2> + <article>"चौड़ाई, यह दीर्घवृत्त को पहले जोड़ता है <h2>

मैं सेट करता हूं max-width पर <h2>एस (50% तक) बस मामले में, और जोड़ा गया outline चौड़ाई स्पष्ट रूप से दिखाने के लिए।

मैंने jQuery का उपयोग चौड़ाई का पता लगाने के लिए किया <h2>ओंलोड, लेकिन उसी का उपयोग करके शुद्ध जेएस के साथ किया जा सकता है getElementByID (मैं इसे सेट कर सकता हूं, भले ही आप "डी पसंद करें"। और निश्चित रूप से इसे केवल दो पर उपयोग करने के लिए डिज़ाइन किया गया था <h2>एस और एक <article> इतना सरल संपादन इसे और अधिक विस्तार योग्य बना सकता है।


संबंधित सवाल
सबसे लोकप्रिय