2011-05-26 21 views
11

का उपयोग कर पैडिंग के साथ टेक्स्ट पर हाइलाइट प्रभाव बनाना मैं लाइन ब्रेक के साथ हाइलाइट किए गए टेक्स्ट प्रभाव को बनाने की कोशिश कर रहा हूं।सीएसएस

उदाहरण:

highlighted text effect

मैं पाठ करने के लिए गद्दी जोड़ने का तरीका समझ नहीं सकता।

background: none repeat scroll 0 0 #1B1615; 
display: inline; 
font-size: 15px; 
line-height: 24px; 
padding-left: 5px; 

जब गद्दी जोड़ने यह केवल गद्दी पाठ और अंत की शुरुआत करने के लिए कहते हैं, के रूप में यहाँ देखा:

Added Padding

सीएसएस यहाँ कि पाठ शामिल अवधि तत्व के लिए सीएसएस है :

background: none repeat scroll 0 0 #1B1615; 
display: inline; 
font-size: 15px; 
line-height: 3em; 
padding: 10px; 

क्या किसी को यह कैसे करना है इस बारे में कोई विचार है?

उत्तर

17

मैं इस एक ही सवाल था और मैं कुछ शिकार किया था और इस एक शुद्ध सीएसएस समाधान है कि केवल सीएसएस का एक छोटा सा की आवश्यकता है पाया: CSS create padding before line-break

बुनियादी समाधान ऊपर और नीचे और एक ठोस बॉक्स छाया पर गद्दी उपयोग कर रहा है पैड के लिए पाठ के बाएँ और दाएँ पक्ष, इस तरह:

.highlight { 
    color:#fff; 
    background:#000; 
    box-shadow:5px 0 0 #000, -5px 0 0 #000; 
    padding: 5px 0; 
} 
+0

अब 2013 के रूप में देख रहे हैं और आधुनिक ब्राउज़र बॉक्स-छाया (या विक्रेता उपसर्ग के साथ बॉक्स-छाया) का समर्थन करते हैं, यह यहां सूचीबद्ध सबसे अच्छा समाधान है। – alexpls

+0

दुर्भाग्य से जीमेल! = आधुनिक ब्राउज़र और बॉक्स-छाया या अन्य CSS3 चश्मे का समर्थन नहीं करता https://www.campaignmonitor.com/css/। क्या ईमेल में ऐसा करने के लिए कोई ज्ञात समाधान है? –

-2

आसपास के ब्लॉक-स्तर तत्व (उदा। Div या td) के लिए पैडिंग जोड़ें और अपने अवधि से पैडिंग हटा दें।

2

बस जोड़ें: पाठ क्षेत्र में जगह सब आप के लिए देख रहे हैं

  

हैं।

+0

यह नहीं करता है 'box-decoration-break

-moz-box-decoration-break:clone; -webkit-box-decoration-break:clone; box-decoration-break:clone; 

उपयोग कर सकते हैं पाठ काम करता है अगर पाठ मनमाने ढंग से लपेटता है, उदाहरण के लिए, तरल पदार्थ कंटेनर में। मुझे लगता है कि यह आपकी लाइन ब्रेक तय होने पर काम कर सकता है, एक ला '

  यह पहली पंक्ति है।  
  यह दूसरी पंक्ति है।  

'। – Bungle

4

बिल्डिंग ब्रैंडन के समाधान के, मैं पता लगा कि आप वास्तव में पूरी तरह गद्दी से बचने और यह कर सकते हैं विशुद्ध रूप से का उपयोग कर बॉक्स छाया के spread option, और पर गद्दी लिपटे इनलाइन तत्व व्यवहार करते हैं जैसा आप उम्मीद करते हैं।

.highlight { 
    background: black; 
    color: white; 
    box-shadow: 0 0 0 5px black; 
} 
+0

यह सही समाधान है –

7

यहां केवल सीएसएस का उपयोग करके टेक्स्ट के लिए बहु-रेखा, गद्दीदार, हाइलाइट व्यवहार प्राप्त करने का एक तरीका है।

यह बॉक्स-छाया विधि पर कहीं और पाया जाता है, हालांकि फ़ायरफ़ॉक्स 32 के रूप में पारंपरिक बॉक्स-छाया समाधान अब सही ढंग से प्रस्तुत नहीं करता है।

एफएफ 32 के लिए चेंजलॉग की समीक्षा में मुझे पता चला कि एक नई संपत्ति है: बॉक्स-सजावट-ब्रेक जो टूटने का कारण बनता है।

यह संपत्ति 'विभाजन' के लिए डिफ़ॉल्ट है लेकिन वांछित मल्टीलाइन पैडिंग प्रभाव प्राप्त करने के लिए 'क्लोन' के रूप में निर्दिष्ट करने की आवश्यकता है।

अधिक जानकारी के लिए देखें: https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

.box { 
 
    width: 50rem; 
 
    margin: 1rem auto; 
 
    font-family: arial, verdana, sans-serif; 
 
} 
 

 
h1 { 
 
    color: white; 
 
    font-size: 2.5rem; 
 
    line-height: 4rem; /* reduce size to remove gap between text */ 
 
    margin: 0px; 
 
} 
 

 
h1 span { 
 
    background-color: #A8332E; 
 
    padding: 0.5rem 0; 
 
    -webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E; 
 
    box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E; 
 
    -webkit-box-decoration-break:clone; 
 
    -moz-box-decoration-break:clone; 
 
    box-decoration-break: clone; 
 
}
<div class="box"> 
 
    <h1> 
 
    <span>Multi-line, padded, highlighted text that display properly in Firefox using box-decoration-break: clone</span> 
 
    </h1> 
 
</div>

+0

यह काम bioutiful! – menardmam