अवधि पृष्ठभूमि रंग और गद्दी समस्याओं

Question

मैं एक डिजाइन मैं लागू करने के लिए है कि अपने स्वयं के पृष्ठभूमि रंग, 10px से गद्देदार, किसी चित्र पर साथ दिखाई दे शीर्षक पाठ शामिल करना चाहते हैं, बराबर उदाहरण है:

http://i.stack.imgur.com/E7EpS.png

इस तस्वीर में पहला उदाहरण अच्छी तरह से काम करता है, और सरल है:

.greenbox {width:520px; height:261px; position:relative;} 
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; } 

मुसीबत पैदा होती है जब पाठ एक और लाइन पर overflows, तो स्पान तत्व गद्दी पंक्ति विराम पर पाठ को प्रभावित नहीं करता है, यह बहुत की तरह प्रस्तुत करता है:

http://i.stack.imgur.com/pY18f.png

किसी को भी एक विकल्प के बारे में पता है, या कि वे किस तरह इस डिजाइन निकल पड़े हैं ताकि पृष्ठभूमि रंग & गद्दी अनुरूप था?

अग्रिम धन्यवाद

संपादित करें: मैं इसे संक्षिप्त बनाने के लिए कोड को सरल बनाया था, लेकिन एक महत्वपूर्ण हिस्सा याद किया था। वास्तव में यह इस तरह है:

.greenbox {width:520px; height:261px; position:relative;} 
.greenbox a {position:absolute; left:0; bottom:40px; } 
.greenbox span { padding:0 10px; background:#000; } 

के रूप में HTML के साथ

:

<div class="greenbox"> 

    <a href="link"><span>The Title Goes Here</span></a> 

</div> 

इस प्रकार अवधि इनलाइन रहता है, एक निरपेक्ष स्थिति लंगर में लिपटे।

Answer 1

मैं कुछ इसी तरह घेरने की कोशिश की है से पहले: Add padding at the beginning and end of each line of text

मैं अपने आप को से कि समाधान लूट लिया है, और अपने मामले के लिए फिट।

ध्यान दें कि line-height और padding समायोजन बहुत मुश्किल हो सकता है सही पाने के लिए।

देखें:http://jsbin.com/ahoyug

HTML:

<div class="greenbox"> 
    <a href="#"><span><span> 
     The Title Goes Here, with overflow 
    </span></span></a> 
</div> 

सीएसएस:

.greenbox {width:500px; height:200px; position:relative; background:green} 

.greenbox > a { 
    font: 50px sans-serif; 
    line-height: 1.14; 
    padding: 0; 
    border-left: 20px solid #000; 
    position: absolute; 
    left: 0; 
    bottom: 60px; 
    text-decoration: none; 
    color: #fff 
} 
.greenbox > a > span { 
    background: #000 
} 
.greenbox > a > span > span { 
    position: relative; 
    left: -10px 
} 

Answer 2

कुछ हद तक आसान तरीका एक लिंक के बाईं ओर border जोड़ने के लिए है और फिर दो wr जोड़ें एपर्स, फिर बाईं ओर स्थित स्थिति और दाईं ओर दूसरी पीठ की स्थिति में, तो यह किसी भी तरह से ऐसा होगा: http://jsfiddle.net/kizu/fNGgN/4/