สิ่งที่ฉันต้องการคือการให้พื้นหลังสีเขียวอยู่หลังข้อความไม่ใช่ความกว้างของหน้า 100% นี่คือรหัสปัจจุบันของฉัน:

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

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

ใส่ข้อความในองค์ประกอบแบบอินไลน์<span>เช่น

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

จากนั้นใช้สีพื้นหลังกับองค์ประกอบอินไลน์

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

องค์ประกอบอินไลน์มีขนาดใหญ่เท่ากับเนื้อหาดังนั้นจึงควรทำเพื่อคุณ

ตัวเลือกที่ 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 Tricksและที่นี่

ตัวเลือก 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;

• ต้องใช้คอนเทนเนอร์หลักของ 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>

เกี่ยวกับ

อาจเป็นคู่มือที่ได้รับความนิยมสูงสุดสำหรับ Flexbox และหนึ่งในเอกสารอ้างอิงที่ฉันใช้อยู่ตลอดเวลาคือCSS Tricks

ตัวเลือก 4

display: block;

• ต้องใช้คอนเทนเนอร์หลักของ flex

.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

• ต้องป้อนคำในไฟล์ css (ไม่ค่อยมีประโยชน์)

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/

เกี่ยวกับ

เพิ่มเติมเกี่ยวกับองค์ประกอบหลอก css :: ก่อนและ :: หลังจากที่CSS Tricksและองค์ประกอบหลอกโดยทั่วไปที่w3schools

ตัวเลือก 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();(และศูนย์กลางโดยทั่วไป) ในบทความเทคนิค CSS นี้

ตัวเลือก 7

text-shadow: และ box-shadow:

• ไม่ใช่สิ่งที่ OP กำลังมองหา แต่อาจเป็นประโยชน์ต่อผู้อื่นในการค้นหาเส้นทางของพวกเขาที่นี่

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/

ตัวเลือกเพิ่มเติม

มีวิธีอื่นอีกสองสามวิธีในการดำเนินการนี้โดยรวมตัวเลือกการแสดงผลที่แตกต่างกันและวิธีการที่อยู่ตรงกลางด้านบน

สายเข้าเกมไม่นาน แต่คิดว่าฉันจะเพิ่ม 2 เซนต์ ...

เพื่อหลีกเลี่ยงการเพิ่มมาร์คอัปพิเศษของช่วงภายในคุณสามารถเปลี่ยน<h1>คุณสมบัติการแสดงผลจากblockเป็นinline(จับได้ว่าคุณจะต้องแน่ใจว่าองค์ประกอบหลังจากนั้น<h1>คือองค์ประกอบของบล็อก

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

ผลลัพธ์

JSFIDDLE http://jsfiddle.net/J7VBV/

เคล็ดลับง่ายๆในการทำเช่นนี้คือการเพิ่ม<span>แท็กและเพิ่มสีพื้นหลังให้กับที่ มันจะเป็นแบบที่คุณต้องการ

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

และ CSS

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

ทำไม?

<span> แท็กในแท็กองค์ประกอบแบบอินไลน์ดังนั้นมันจะครอบคลุมเฉพาะเนื้อหาแกล้งผล

แก้ไข: คำตอบด้านล่างจะใช้ในกรณีส่วนใหญ่ OP อย่างไรก็ตามในภายหลังกล่าวว่าพวกเขาไม่สามารถแก้ไขสิ่งอื่นนอกจากไฟล์ CSS แต่จะออกจากที่นี่เพื่อคนอื่นอาจใช้งานได้

ข้อพิจารณาหลักที่ผู้อื่นละเลยคือ OP ได้ระบุว่าพวกเขาไม่สามารถแก้ไข HTML ได้

คุณสามารถกำหนดเป้าหมายสิ่งที่คุณต้องการใน DOM จากนั้นเพิ่มคลาสแบบไดนามิกด้วย javascript จากนั้นสไตล์ตามที่คุณต้องการ

ในตัวอย่างที่ฉันทำฉันกำหนดเป้าหมาย<p>องค์ประกอบทั้งหมดด้วย jQuery และหุ้มด้วย div ด้วยคลาส "สี"

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

จากนั้นใน CSS ของฉันฉันกำหนดเป้าหมาย<p>และให้สีพื้นหลังและเปลี่ยนเป็นdisplay: inline

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

ด้วยการตั้งค่าการแสดงผลเป็นแบบอินไลน์คุณจะสูญเสียการจัดแต่งทรงผมบางส่วนที่ปกติแล้วจะสืบทอด ดังนั้นตรวจสอบให้แน่ใจว่าคุณกำหนดเป้าหมายองค์ประกอบเฉพาะที่สุดและจัดสไตล์คอนเทนเนอร์ให้พอดีกับส่วนที่เหลือของการออกแบบของคุณ นี่เป็นเพียงจุดเริ่มต้นในการทำงาน ใช้อย่างระมัดระวัง สาธิตการทำงานกับCodePen

h1 เป็นองค์ประกอบระดับบล็อก คุณจะต้องใช้บางอย่างเช่น span แทนเนื่องจากเป็นองค์ประกอบระดับอินไลน์ (เช่น: จะไม่ขยายทั้งแถว)

ในกรณีของคุณฉันขอแนะนำต่อไปนี้:

style.css

.highlight 
{
   background-color: green;
}

HTML

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

ในฐานะที่เป็นคำตอบอื่น ๆ ทราบคุณสามารถเพิ่มbackground-colora <span>รอบข้อความของคุณเพื่อให้ได้งาน

ในกรณีที่คุณมีline-heightแม้ว่าคุณจะเห็นช่องว่าง ในการแก้ไขปัญหานี้คุณสามารถเพิ่มbox-shadowa ขึ้นเล็กน้อยเพื่อเพิ่มระยะเวลาของคุณ คุณจะต้องการbox-decoration-break: clone;ให้ FireFox แสดงผลอย่างถูกต้อง

แก้ไข: หากคุณได้รับปัญหาใน IE11 ด้วย box-shadow ลองเพิ่ม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>

ลองลบศูนย์จัดแนวข้อความและจัดกึ่งกลาง<h1>หรือ<div>ข้อความอยู่

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

สามารถใช้แท็กทำเครื่องหมาย html5 ภายในย่อหน้าและแท็กส่วนหัว

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

คุณสามารถใช้<mark>แท็กHTML5

HTML:

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

CSS:

mark
{
    background-color: green;
}

ลองอันนี้:

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/

คุณต้องพูดถึงความกว้างของแท็ก h1 ..

CSS ของคุณจะเป็นเช่นนี้

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

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

การสาธิตเกี่ยวกับ codepen

HTML

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

CSS

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