html - Wie lege ich die Hintergrundfarbe von Zieltext nur mit CSS fest?

original title: "html - How do I set the background color of targeted text only, using only CSS?"


Translate

Question

How can I dynamically add a green background behind text, not the entire page width, just the text.

Problem

The green is expanding to the entire page with my current code. I am not able to modify the HTML or Javascript, just the CSS file.

enter image description here

HTML

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

CSS

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


Frage Wie kann ich dynamisch einen grünen Hintergrund hinter Text einfügen, nicht die gesamte Seitenbreite, sondern nur den Text? Problem Das Grün wird mit meinem aktuellen Code auf die gesamte Seite erweitert. Ich bin nicht in der Lage ...

Dies ist die Zusammenfassung nach der Übersetzung. Wenn Sie die vollständige Übersetzung anzeigen möchten, klicken Sie auf das Symbol "Übersetzen"


Alle Antworten
  • Translate

    Put the text in an inline element, such as a <span>.

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

    And then apply the background color on the inline element.

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

    An inline element is as big as its contents is, so that should do it for you.


  • Translate

    A little late to game but thought I would add my 2 cents...

    To avoid adding the extra mark-up of an inner span you could change the <h1> display property from block to inline (catch is you would have ensure the elements after the <h1> are block elements.

    HTML

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

    CSS

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

    Result
    enter image description here
    JSFIDDLE http://jsfiddle.net/J7VBV/


  • Translate

    Option 1

    display: table;

    • no parent required

    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>

  • Translate

    A very simple trick to do so, is to add a <span> tag and add background color to that. It will look just the way you want it.

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

    And CSS

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

    WHY?

    <span> tag in an inline element tag, so it will only span over the content faking the effect.


  • Translate

    EDIT: the answer below would apply in most cases. OP however later mentioned that they could not edit anything other than the CSS file. But will leave this here so it may be of use to others.

    enter image description here

    The main consideration that others are neglecting is that OP has stated that they cannot modify the HTML.

    You can target what you need in the DOM then add classes dynamically with javascript. Then style as you need.

    In an example that I made, I targeted all <p> elements with jQuery and wrapped it with a div with a class of "colored"

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

    Then in my CSS i targeted the <p> and gave it the background color and changed to display: inline

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

    By setting the display to inline you lose some of the styling that it would normally inherit. So make sure that you target the most specific element and style the container to fit the rest of your design. This is just meant as a working starting point. Use carefully. Working demo on CodePen


  • Translate

    h1 is a block level element. You will need to use something like span instead as it is an inline level element (ie: it does not span the whole row).

    In your case, I would suggest the following:

    style.css

    .highlight 
    {
       background-color: green;
    }
    

    html

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

  • Translate

    Try removing the text-alignment center and center the <h1> or <div> the text resides in.

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

  • Translate

    You can use the HTML5 <mark> tag.

    HTML:

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

    CSS:

    mark
    {
        background-color: green;
    }
    

  • Translate

    Try this one:

    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);
    }
    

    Please note that calc is not compatible to all browsers :) Just want to be consistent with the alignment in the original post.

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


  • Translate

    You have to mention the width of the h1 tag..

    your css will be like this

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

  • Translate

    HTML

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

    Css

    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.
      }
    }
    

    Demo on codepen