ब्लॉक तत्व में सीमा चौड़ाई को पाठ चौड़ाई में प्रतिबंधित करें

Question

मेरे पास शीर्षक <div> (238px) के साथ एक निश्चित में है। जब यह पृष्ठ प्रस्तुत किया जाता है, तो टेक्स्ट चौड़ाई (238 पीएक्स) फिट करने के लिए शीर्षक में लाइन ब्रेक प्रबंधित करता है।

लेकिन एच 2 तत्व की चौड़ाई संपत्ति अभी भी 238 पीएक्स है, कोई फर्क नहीं पड़ता कि लाइन ब्रेक हैं।

मैं केवल पाठ के तहत border-bottom सेट करना चाहता हूं, और एच 2 तत्व की पूरी चौड़ाई के नीचे नहीं, और मुझे नहीं पता कि सीएसएस का उपयोग करके इसे कैसे प्राप्त किया जाए।

आप देख सकते हैं मैं यहाँ क्या मतलब है: http://jsfiddle.net/np3rJ/2/

धन्यवाद

Answer 1

यदि आप display: table-cell, और छद्म तत्वों का उपयोग करने के इच्छुक हैं, तो आपके पास एक बहुत अच्छा समाधान हो सकता है (कुछ मामूली सीमाओं के साथ)।

एचटीएमएल बदल नहीं करता है:

<div class="dossier_titre"> 
    <h2>Horizon 2020, nouvelles opportunités</h2> 
</div> 

और आपको निम्न CSS लागू कर सकते हैं:

.zone_33 { 
    width: 238px; 
    padding: 0px; 
    margin: 0px; 
} 

.zone_33 .dossier_titre { 
    margin: 0px 0px 20px 0px; 
} 

.zone_33 h2 { 
    color: #616263; 
    font-size: 150%; 
    font-weight: lighter; 
    padding: 0px 0px 12px 0px; 
    background: none; 
    border-bottom: 1px solid grey; 
    display: table-cell; 
    text-transform: uppercase; 
} 

.zone_33 .dossier_titre:after { 
    content: ""; 
    display: table-cell; 
    width: 100%; 
} 

<h2> तत्व के लिए, display: table-cell निर्धारित करते हैं, और (.dossier_titre के बाद एक छद्म तत्व जोड़ हेडर/शीर्षक तत्व के लिए ब्लॉक युक्त)। छद्म-तत्व भी table-cell है और इसकी चौड़ाई 100% है (यह कुंजी है)।

इसके अलावा, h2 अब ब्लॉक तत्व नहीं है, इसलिए हमारे लेआउट में दृश्य अंतर को बनाए रखने के लिए अपने मार्जिन .dossier_titre पर जोड़ें।

यह कैसे काम करता
मैं दूसरे सेल (छद्म तत्व) 100% की चौड़ाई होने के साथ एक दो सेल तालिका बनाने रहा हूँ।यह ब्राउजर को पहले सेल (h2) के लिए सिकुंक-टू-फिट चौड़ाई की गणना करने के लिए ट्रिगर करता है जिसमें शीर्षक टेक्स्ट होता है। इस प्रकार पाठ को प्रदर्शित करने के लिए पहली सेल की चौड़ाई कम से कम आवश्यक है। नीचे की सीमा तब तक होती है जब तक टेक्स्ट-सेल में टेक्स्ट ब्लॉक में सबसे लंबी टेक्स्ट लाइन होती है।

सीमाएं
table-cell हैक बिना IE7 में समर्थित नहीं है, लेकिन काम के आसपास काफी अच्छी तरह से जाना जाता है और यदि आवश्यक हो पाया जा सकता है।

यदि शीर्षक में बहुत कम शब्द थे, तो आपको अप्रत्याशित स्थानों में लाइन तोड़ने मिल सकती है। आवश्यक शब्दों को एक साथ रखने के लिए आपको &nbsp डालने की आवश्यकता होगी।

फिडल: http://jsfiddle.net/audetwebdesign/h34pL/

Answer 2

शायद display: inline-block; या display: inline; तुम क्या जरूरत है?

Answer 3

कोशिश नहीं क्यों:

text-decoration:underline 

?

संपादित

बस ड्रॉइंग के साथ चारों ओर "opportunites" अंतराल बनाते हैं।

<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2> 
.underline { 
    text-decoration:underline 
} 

Answer 4

मैं इस बारे में सोच रहा है कि तुम क्या जरूरत है:

<h2><span>Horizon 2020, nouvelles opportunités<span></h2> 

h2 span { 
    position: relative; 
    padding-bottom: 5px; 
} 
h2 span::after{ 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 1px; 
    border-bottom: 1px solid #000; 
    content: "" 
} 

इस बेला सीएफआर: Advanced CSS challenge: underline only the final line of text with CSS

मैं में एक span शुरू की: http://jsfiddle.net/b8cwD/4/

मैं तकनीक इस जवाब में वर्णित इस्तेमाल किया H2 इसके प्रदर्शन डिस्प्ले को न बदलने के क्रम में, लेकिन आप बस आसानी से कर सकते हैं अपने एच 2 पर display: inline के साथ एक ही तकनीक का उपयोग करें।

Answer 5

इस प्रयास करें, (मुझे लगता है कि आप में मदद मिलेगी)

.heading { 
    position: relative; 
    color: $gray-light; 
    font-weight: 700; 
    bottom: 5px; 
    padding-bottom: 5px; 
    display:inline-block; 
} 

.heading::after { 
    position: absolute; 
    display:inline-block; 
    border: 1px solid $brand-primary !important; 
    bottom: -1px; 
    content: ""; 
    height: 2px; 
    left: 0; 
    width: 100%; 
}