2010-01-06 4 views
5

मुझे प्री-एलिमेंट के भीतर कुछ टेक्स्ट स्टाइल करने की आवश्यकता है।मैं पृष्ठभूमि पृष्ठभूमि रंग कैसे सेट करूं ताकि यह पूरे पंक्ति में पृष्ठभूमि को रंगों में प्रदर्शित कर सके (डिस्प्ले: ब्लॉक; एक विकल्प नहीं)

<pre> 
some text <span style="background-color:#ddd;">and some text 
with a different background</span> and some more text 
</pre> 

फिर एचटीएमएल प्रदान की गई है, काल-तत्व पृष्ठभूमि केवल पाठ के नीचे बदल गई है: कि के लिए, मैं एक इनलाइन अवधि तत्व इस तरह का उपयोग करें।

क्या ब्लॉक या इनलाइन-ब्लॉक में डिस्प्ले बदलने के बिना पृष्ठभूमि-रंग को पूरे लाइन में विस्तार करना संभव है।

या जावास्क्रिप्ट के साथ इसे प्राप्त करने का कोई तरीका है?

+2

वास्तव में नहीं, नहीं (हालांकि शायद जेएस के साथ)। क्या कुछ कारणों से 'डिस्प्ले: ब्लॉक' समस्या है? –

+0

आपका प्रश्न थोड़ा अस्पष्ट है। उदाहरण पाठ के किस भाग में पृष्ठभूमि छवि होनी चाहिए? –

+0

यह प्रोग्रामिंग से संबंधित प्रतीत नहीं होता है। मैं इसके बजाय http://doctype.com/ पर पूछूंगा। –

उत्तर

0

अवधि एक इनलाइन तत्व है। पूरी चौड़ाई को भरने के लिए आपको ब्लॉक स्तर तत्व की आवश्यकता होगी। Inline versus block

0

अवधि तत्व इनलाइन है, इसलिए यह उस स्थान को बदलता है जहां आपने इसे रखा है। चूंकि यह <pre> टैग के भीतर भी है, यदि आप इसे टेक्स्ट के चारों ओर व्हाइटस्पेस के लिए पृष्ठभूमि भी बदलना चाहते हैं, तो आप उस अवधि के भीतर व्हाइटस्पेस को शामिल कर सकते हैं।

उदाहरण के लिए, यह प्रत्येक पंक्ति के साथ-साथ पाठ के पीछे कुछ सफेद जगहों के लिए पृष्ठभूमि परिवर्तन करेगा (लेकिन केवल pre की वजह से व्हाइटस्पेस को ध्यान में रखा जाता है, बिना व्हाइटस्पेस के पूर्व सामान्य के रूप में अनदेखा।)

<pre> 
some text 
<span style="background-color:#ddd;">and some text     <br/> 
with a different background   </span> 
and some more text 
</pre> 

ब्लॉक तत्व का उपयोग करने से आपको क्या रोक रहा है? जब यह इस विशिष्ट भाग में होता है या केवल एक अवधि के बजाय शुरू करने के लिए ब्लॉक तत्व का उपयोग करते हैं, तो इनलाइन के बजाय स्पैन डिस्प्ले को ब्लॉक तत्व के रूप में बनाने के लिए बेहतर होगा। उदाहरण के लिए,

<html> 
<head> 
    <style> 
    pre span { display: block; } 
    </style> 
</head> 
<body> 
    <pre> 
    some text 
    <span style="background-color:#ddd;">and some text<br/> 
    with a different background</span> 
    and some more text 
    </pre> 
</body> 
</html> 
+0

कारण यह एक ब्लॉक तत्व नहीं हो सकता है, यह लाइनब्रेक पेश करेगा, फिर एक अवधि शुरू होती है और अन्य तत्वों या अन्य पाठ के समान रेखा पर समाप्त होती है। गलतफहमी के लिए खेद है। मैंने स्पष्टीकरण के लिए उदाहरण को सही किया। –

4

आप इसे अपने पाठ को एक अलग तरीके से स्वरूपित करके प्राप्त कर सकते हैं। मैं प्राप्त कर ली है कि मैं क्या लगता है कि आप निम्नलिखित के साथ की तलाश में हैं:

<pre> 
    some text<span style="background-color:#ddd;"> 
    and some text 
    with a different background</span> 
    and some more text 
    </pre> 
+0

सफारी या फ़ायरफ़ॉक्स में नहीं। मुझे खेद है अगर मैं पर्याप्त स्पष्ट नहीं था। पृष्ठभूमि रंग को युक्त बॉक्स के अंत तक जारी रखना होगा। इस मामले में पूर्व तत्व के दाहिने तरफ। –

2

आप रिवर्स मोड में काम करने के लिए कोशिश कर सकते हैं, यह अधिक मार्कअप है, लेकिन यह तुम क्या चाहते है।

<pre> 
<div style="background-color:#ddd;float:left"><span style="background-color:#fff">some text</span>and some text 
with a different background <span style="background-color:#fff">and some more text</span> 
</div> 
</pre> 
+0

अच्छा। लेकिन यह एक समस्या पेश करता है पहली पंक्ति में ग्रे टेक्स्ट दूसरी पंक्ति में सफेद पाठ से लंबा है। फिर टेक्स्ट समाप्त होने के बाद दूसरी पंक्ति ग्रे हो जाएगी। लेकिन एक स्थिर मार्कअप के लिए, यह काम करेगा। –

संबंधित मुद्दे