मैं सीएसएस का उपयोग करते हुए, पूरे तत्व की चौड़ाई नहीं, पाठ की चौड़ाई के लिए पृष्ठभूमि-रंग कैसे सेट करूं?

Question

जो मैं चाहता हूं वह हरे रंग की पृष्ठभूमि के लिए पाठ के पीछे होना चाहिए, पृष्ठ की चौड़ाई का 100% नहीं होना चाहिए। यहाँ मेरा वर्तमान कोड है:

h1 { 
    text-align: center; 
    background-color: green; 
}

<h1>The Last Will and Testament of Eric Jones</h1> 

Comments

क्या इसमें स्पान डाले बिना ऐसा किया जा सकता है?

— थोमस-पीटर

स्पैन को जोड़ने से बचने के लिए आप ब्लॉक इनलाइन से <h1> डिस्प्ले प्रॉपर्टी को बदल सकते थे (कैच है कि आप तत्वों को सुनिश्चित करने के बाद <h1> ब्लॉक एलिमेंट हैं।

— Dan

Answer 1

पाठ को इनलाइन तत्व में रखें , जैसे कि ए <span>।

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

और फिर इनलाइन तत्व पर पृष्ठभूमि का रंग लागू करें।

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

इनलाइन तत्व उतना ही बड़ा है जितना कि इसकी सामग्री है, इसलिए इसे आपके लिए करना चाहिए।

Comments

धन्यवाद, यह शर्म की बात है, मैं HTML को संशोधित नहीं कर सकता।

— थॉमस-पीटर

@tom: आप स्पैन डालने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

— बालूसी

धन्यवाद, लेकिन मेरे पास केवल CSS को संशोधित करने की अनुमति है। कोई बात नहीं।

— थॉमस-पीटर

बस प्रदर्शन css नियम को h1 चयनकर्ता में जोड़ें, आपको <span> टैग नहीं जोड़ना होगा। इस तरह:h1 { display:inline; }

— लूडो -

प्रदर्शन: तालिका एक बेहतर विकल्प है ... अगले उत्तर में टिप्पणी अनुभाग में हाइलाइट की गई समस्या से बचने के लिए। प्रदर्शन: इनलाइन <h1> और <h2> एक ही लाइन में होगा .... जब वे मूल रूप से अगली लाइनों में होंगे।

— १।

Answer 2

विकल्प 1

display: table;

• माता-पिता की आवश्यकता नहीं

h1 {
    display: table; /* keep the background color wrapped tight */
    margin: 0px auto 0px auto; /* keep the table centered */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

<h1>The Last Will and Testament of Eric Jones</h1>

बेला

http://jsfiddle.net/J7VBV/293/

अधिक

display: table एक सामान्य HTML तालिका के रूप में व्यवहार करने के लिए तत्व बताता है।

इसके बारे में अधिक w3schools , CSS ट्रिक्स और यहाँ

---

विकल्प 2

display: inline-flex;

• text-align: center;माता-पिता पर आवश्यकता है

.container {
    text-align: center; /* center the child */
}
h1 {
    display: inline-flex; /* keep the background color wrapped tight */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

---

विकल्प 3

display: flex;

• एक फ्लेक्स पैरेंट कंटेनर की आवश्यकता होती है

.container {
  display: flex;
  justify-content: center; /* center the child */
}
h1 {
    display: flex;
    /* margin: 0 auto; or use auto left/right margin instead of justify-content center */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

    <div class="container">
      <h1>The Last Will and Testament of Eric Jones</h1>
    </div>

के बारे में

फ्लेक्सबॉक्स के लिए संभवतः सबसे लोकप्रिय मार्गदर्शिका और लगातार एक I संदर्भ सीएसएस ट्रिक्स पर है

---

विकल्प 4

display: block;

• एक फ्लेक्स पैरेंट कंटेनर की आवश्यकता होती है

.container {
  display: flex;
  justify-content: center; /* centers child */
}
h1 {
    display: block;
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

---

विकल्प 5

::before

• सीएसएस फ़ाइल में शब्द दर्ज करने की आवश्यकता है (बहुत व्यावहारिक नहीं)

h1 {
    display: flex; /* set a flex box */
    justify-content: center; /* so you can center the content like this */
}

h1::before {
    content:'The Last Will and Testament of Eric Jones'; /* the content */
    padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}

<h1></h1>

बेला

http://jsfiddle.net/J7VBV/457/

के बारे में

सीएसएस छद्म तत्वों के बारे में अधिक जानकारी :: सीएसएस ट्रिक्स में पहले और बाद में w3sort में सामान्य रूप से छद्म तत्व

---

विकल्प 6

display: inline-block;

• के साथ केंद्रित है position: absoluteऔरtranslateX

• एक position: relativeमाता पिता की आवश्यकता है

.container {
  position: relative; /* required for absolute positioned child */
}
h1 {
  display: inline-block; /* keeps container wrapped tight to content */
  position: absolute; /* to absolutely position element */
  top: 0;
  left: 50%; /* part1 of centering with translateX/Y */
  transform: translateX(-50%); /* part2 of centering with translateX/Y */
  white-space: nowrap; /* text lines will collapse without this */
  padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

  <h1>The Last Will and Testament of Eric Jones</h1>

के बारे में

इस सीएसएस ट्रिक्स लेखtransform: translate(); में (और सामान्य रूप से केंद्रित) के साथ केंद्रित होने पर अधिक

---

विकल्प 7

text-shadow: तथा box-shadow:

• नहीं ओपी क्या देख रहा था, लेकिन शायद दूसरों के लिए उपयोगी है यहाँ अपना रास्ता खोजने के लिए।

h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}
h1 {
    text-shadow: 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green;
}
h2 {
    text-shadow: -5px -5px 5px green,-5px 5px 5px green,
                  5px -5px 5px green,5px 5px 5px green;
}
h3 {
    color: hsla(0, 0%, 100%, 0.8);
    text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1);
}
h4 { /* overflow:hidden is the key to this one */
    text-shadow: 0px 0px 35px green,0px 0px 35px green,
                 0px 0px 35px green,0px 0px 35px green;
}
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */
  box-shadow: inset 0px 0px 0px 1000px green;
}

<h1>The First Will and Testament of Eric Jones</h1>
<h2>The 2nd Will and Testament of Eric Jones</h2>
<h3>The 3rd Will and Testament of Eric Jones</h3>
<h4>The Last Will and Testament of Eric Jones</h4>
<h5>The Last Box and Shadow of Eric Jones</h5>

बेला

https://jsfiddle.net/Hastig/t8L9Ly8o/

अधिक विकल्प

ऊपर दिए गए विभिन्न प्रदर्शन विकल्पों और केंद्र विधियों को मिलाकर इसके बारे में कुछ अन्य तरीके हैं।

Comments

कोई कंटेनर और कोई छद्म तत्वों के साथ ऐसा करना बस कमाल है! नहीं पता था कि display: tableइतना शक्तिशाली हो सकता है, लेकिन मैं सराहना करता हूं कि आपने काम के विकल्प प्रदान किए हैं।

— CPHPython

Answer 3

खेल में थोड़ा देर हो गई लेकिन मुझे लगा कि मैं अपने 2 सेंट जोड़ूंगा ...

एक आंतरिक अवधि आप को बदल सकता है की अतिरिक्त मार्क-अप जोड़ने से बचने के लिए <h1>से प्रदर्शन संपत्ति blockके लिए inline(पकड़ आप तत्व यह सुनिश्चित करने के बाद होता है <h1>ब्लॉक तत्व हैं।

एचटीएमएल

<h1>  
The Last Will and Testament of
Eric Jones</h1> 
<p>Some other text</p>

सीएसएस

h1{
    display:inline;
    background-color:green;
    color:#fff;
}

परिणाम

JSFIDDLE http://jsfiddle.net/J7VBV/

Comments

सही बात? वास्तव में? इस तरह हेडिंग अब केंद्रित नहीं है (क्योंकि यह इनलाइन प्रदर्शित है)। ओपी के प्रश्न में स्पष्ट रूप से एक केंद्रित शीर्षक की आवश्यकता शामिल है।

— बालुसक

@BalusC - नहीं जहां मूल प्रश्न में ओपी विशेष रूप से बताता है कि हेडिंग को केंद्रित करना है। प्रश्न स्पष्ट रूप से पूछता है कि कैसे हरे रंग की पृष्ठभूमि को पूरी चौड़ाई में नहीं जाना है। #justSaying

— दान

ओपी का स्क्रीनशॉट और ओपी का प्रारंभिक सीएसएस अन्यथा निकलता है।

— बालुसक

हो सकता है कि, लेकिन हम यहाँ विशिष्ट बातें कर रहे हैं - धारणाएँ नहीं।

— डान

इससे मामलों में समस्या जुड़ गई है .. जहाँ यदि <h1> और <h2> टैग तुरंत अगली पंक्तियों में हैं ... तो <h1> और <h2> फिर उसी पंक्ति में प्रदर्शित होंगे। नीचे का प्रदर्शन: यदि आप <h1> <h2> टैग के स्रोत कोड को बदलना नहीं चाहते हैं तो टेबल विकल्प एक अच्छा विकल्प है ... लेकिन केवल css को बदलें।

— इह्तोवर

Answer 4

ऐसा करने के लिए एक बहुत ही सरल चाल है, एक <span>टैग जोड़ना और उस पर पृष्ठभूमि का रंग जोड़ना है। यह आप जैसा चाहते हैं वैसा ही दिखेगा।

<h1>  
    <span>The Last Will and Testament of Eric Jones</span>
</h1> 

और सीएसएस

h1 { text-align: center; }
h1 span { background-color: green; }

क्यों?

<span> इनलाइन एलिमेंट टैग में टैग, इसलिए यह केवल प्रभाव को कम करने वाली सामग्री के ऊपर होगा।

Answer 5

EDIT: नीचे दिया गया जवाब ज्यादातर मामलों में लागू होगा। ओपी ने हालांकि बाद में उल्लेख किया कि वे सीएसएस फ़ाइल के अलावा कुछ भी संपादित नहीं कर सकते हैं। लेकिन इसे यहां छोड़ देंगे इसलिए यह दूसरों के काम आ सकता है।

दूसरों की उपेक्षा करने वाला मुख्य विचार यह है कि ओपी ने कहा है कि वे HTML को संशोधित नहीं कर सकते हैं।

आप लक्ष्य कर सकते हैं कि आपको DOM में क्या चाहिए तो कक्षाओं को डायनामिक रूप से जावास्क्रिप्ट के साथ जोड़ें। फिर आवश्यकतानुसार स्टाइल करें।

एक उदाहरण में जो मैंने बनाया, मैंने <p>jQuery के साथ सभी तत्वों को लक्षित किया और इसे "रंगीन" वर्ग के साथ एक डिव के साथ लपेट दिया।

$( "p" ).wrap( "<div class='colored'></div>" );

तब मेरे सीएसएस में मैंने <p>इसे लक्षित किया और इसे पृष्ठभूमि का रंग दिया और बदल दियाdisplay: inline

.colored p {
    display: inline;
    background: green;
}

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

Answer 6

h1 एक ब्लॉक स्तर का तत्व है। आपको स्पैन की तरह कुछ का उपयोग करने की आवश्यकता होगी क्योंकि यह एक इनलाइन स्तर का तत्व है (यानी: यह पूरी पंक्ति को नहीं फैलाता है)।

आपके मामले में, मैं निम्नलिखित सुझाव दूंगा:

style.css

.highlight 
{
   background-color: green;
}

एचटीएमएल

<span class="highlight">only the text will be highlighted</span>

Answer 7

अन्य उत्तर ध्यान दें के रूप में, आप एक जोड़ सकते हैं background-colorएक के लिए <span>काम करने के लिए इसे पाने के लिए अपने पाठ के चारों ओर।

इस मामले में जहां आपके पास line-heightहालांकि, आप अंतराल देखेंगे। इसे ठीक करने के लिए आप box-shadowअपनी अवधि में थोड़ा-सा विकास कर सकते हैं। आप box-decoration-break: clone;फायरफॉक्स को ठीक से प्रस्तुत करना भी चाहेंगे ।

संपादित करें: यदि आप बॉक्स-छाया के साथ IE11 में समस्याएँ प्राप्त कर रहे हैं, तो outline: 1px solid [color];केवल IE के लिए एक साथ जोड़ने का प्रयास करें ।

यहाँ यह कार्रवाई में कैसा दिखता है:

.container {
  margin: 0 auto;
  width: 400px;
  padding: 10px;
  border: 1px solid black;
}

h2 {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  font-size: 40px;
}

h2 > span {
  background-color: #D32;
  color: #FFF;
  box-shadow: -10px 0px 0 7px #D32,
    10px 0px 0 7px #D32,
    0 0 0 7px #D32;
  box-decoration-break: clone;
}

<div class="container">
    <h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>

Answer 8

पाठ संरेखण केंद्र निकालने का प्रयास करें और केंद्र <h1>या <div>में पाठ बसता था।

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}

Answer 9

पैराग्राफ और हेडिंग टैग के भीतर html5 मार्क टैग का उपयोग कर सकते हैं ।

<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>

Answer 10

आप HTML5 <mark>टैग का उपयोग कर सकते हैं ।

HTML:

<h1><mark>The Last Will and Testament of Eric Jones</mark></h1>

सीएसएस:

mark
{
    background-color: green;
}

Comments

OP को CSS के लिए केवल समाधान की आवश्यकता थी

— JGallardo

Answer 11

इसको आजमाओ:

h1 {
    text-align: center;
    background-color: green;
    visibility: hidden;
}

h1:after {
    content:'The Last Will and Testament of Eric Jones';
    visibility: visible;
    display: block;
    position: absolute;
    background-color: inherit;
    padding: 5px;
    top: 10px;
    left: calc(30% - 5px);
}

कृपया ध्यान दें कि कैल्क सभी ब्राउज़रों के लिए संगत नहीं है :) बस मूल पोस्ट में संरेखण के अनुरूप होना चाहते हैं।

https://jsfiddle.net/richardferaro/ssyc04o4/

Answer 12

आपको h1 टैग की चौड़ाई का उल्लेख करना होगा।

आपका सीएसएस इस तरह होगा

h1 {
text-align: center;
background-color: green;
width: 600px;
 }

Answer 13

एचटीएमएल

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1> 

सीएसएस

h1{
  font-size: 50px;
  padding: 13px; //Padding on the sides so as not to stick.


  span {  
    background: #111; // background color
    color: #fff;
    line-height: 1.3; //The height of indents between lines.
    box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
  }
}

कोडपेन पर डेमो

Comments

फ़ायरफ़ॉक्स की आवश्यकता है box-decoration-break: clone;, developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

— Coburn

Answer 14

एचटीएमएल

<h1 class="green-background"> Whatever text you want. </h1>

सीएसएस

.green-background { 
    text-align: center;
    padding: 5px; /*Optional (Padding is just for a better style.)*/
    background-color: green; 
}

Comments

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

— डेविड बक

Answer 15

<h1 style="display:inline-block;text-align: center;background : red;">The Last Will and Testament of Eric Jones</h1>

Comments

कुंआ। वह कुछ कोड है। बस कुछ कोड। यह पूरी तरह से स्पष्टीकरण से मुक्त है। यह बदलने का पक्ष प्रभाव है कि शीर्ष कैसे इसके आसपास की सामग्री के संबंध में व्यवहार करता है। यह कुछ नहीं कहता है कि stackoverflow.com/a/32919558/19068 और stackoverflow.com/a/20257339/19068 दोनों ने पहले ही नहीं कहा है

— Quentin