<span> एक पैराग्राफ

Question

में ओवरलैपिंग तार मान लीजिए कि मैं पाठ की तरह चला रहे हैं। मैं उत्पादन दोनों तार की तरह लग रहे करना चाहते हैं स्वतंत्र रूप से पाए गए, शायद प्रत्येक मिलान किया स्ट्रिंग के लिए एक अलग रंग का रेखांकन लागू करने, इसलिए जैसे:

लेकिन, HTML में मैं फैला ओवरलैप नहीं कर सकते क्योंकि अगर मैंने कोशिश की इस:

span.first { border-bottom: 1px solid red; } 
span.second { border-bottom: 1px solid blue; } 

<p>There are 
    <span class="first">many <span class="second">people</span> in Asia</span>. 
</p> 

पहले </span>span.second बंद कर देगा।

मेरे सोचा पाठ इस तरह है कि वे ऊपर p में मिलान वाला पाठ के साथ लाइन अप के नीचे div s को स्थान है, लेकिन मैं मिलान किया तार के आरंभ और अंत पदों सीएसएस का उपयोग कर एक बुरा सपना हो सकता है के साथ उन divs संरेखित शर्त ।

यह कैसे करें इस पर कोई विचार?

Answer 1

आप शायद प्रत्येक शब्द को अपने व्यक्तिगत अवधि तत्व में डाल सकते हैं और फिर उन्हें उचित रूप से शैली बनाने के लिए कक्षाओं का उपयोग कर सकते हैं। कुछ स्पैनों में कई कक्षाएं होंगी जहां अंडरलाइन ओवरलैप होती है। वर्बोज़ और बदसूरत मार्कअप की तरह, लेकिन मुझे लगता है कि यह आपकी समस्या का समाधान करेगा।

Answer 2

आप उदाहरण के seprately ओवरलैप घटक मार्कअप सकता है, .:

<p>There are 
    <span class="first">many </span> 
    <span class="overlap">people</span> 
    <span class="second"> in Asia</span>. 
</p> 

Answer 3

HTML:

<p>There are 
     <span class="first">many </span> 
     <span class="second">people</span> 
     in Asia. 
    </p> 

सीएसएस:

span.first { border-bottom: 1px solid red; } 
span.second { border-bottom: 1px solid blue; } 

Answer 4

आप ऐसा कर सकता है:

<p>There are 
    <span class="first">many <span class="second">people</span></span> 
    <span class="second">in Asia</span>. 
</p> 

अन्य दो समाधानों के रूप में साफ नहीं है, लेकिन यह आपके मूल उदाहरण के समान ही शैली में होगा।