CSS만을 사용하여 전체 요소의 너비가 아닌 텍스트의 너비에 대한 배경색을 설정하려면 어떻게 해야 합니까?

CSS만을 사용하여 전체 요소의 너비가 아닌 텍스트의 너비에 대한 배경색을 설정하려면 어떻게 해야 합니까?

제가 원하는 것은 녹색 배경이 페이지 너비의 100%가 아니라 텍스트 바로 뒤에 있는 것입니다.현재 코드는 다음과 같습니다.

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

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

할 수 에 HTML과 할 수 없습니다. 따라서 내부 요소를 추가할 수 없습니다.<span>자바스크립트 등으로 삽입할 수도 없습니다.

텍스트를 다음과 같은 인라인 요소에 넣습니다.<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 테이블처럼 동작하도록 지정합니다.

w3 학교, 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>

대해서

아마 플렉스박스에 대한 가장 인기 있는 가이드일 것이고 제가 계속해서 참조하는 것은 CSS 트릭입니다.

---

옵션 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

• 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 트릭 및 일반적으로 w3 학교에서 유사 요소.

---

옵션 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>의 속성 blockinline(중요한 것은 당신이 그 후에 요소들을 확실히 했을 것이라는 것입니다.<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/

로 다른답노같다추수가있다니습할음을이트와변을 할 수 .background-color<span>이 작업을 수행하기 위해 당신의 문자 주위에.

당신이 가지고 있는 경우.line-height하지만, 당신은 격차를 보게 될 것입니다.이 문제를 해결하려면 다음을 추가할 수 있습니다.box-shadow당신의 범위에 맞게 약간의 성장과 함께.당신은 또한 원할 것입니다.box-decoration-break: clone;FireFox가 올바르게 렌더링할 수 있도록 합니다.

EDIT:, "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>

그렇게 하기 위한 매우 간단한 속임수는, 추가하는 것입니다.<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에서 당신이 필요로 하는 것을 타겟팅한 후 자바스크립트로 동적으로 클래스를 추가할 수 있습니다.그런 다음 필요에 따라 스타일을 조정합니다.

제가 만든 예에서, 저는 모든 것을 대상으로 했습니다.<p>하고 "jQuery " 와 " 상로스 " 래가있 " 는습니 " 클쌌다 " 감가는 " 로 " "▁with상 " 쌌▁divj " ▁div습▁elements " ▁it니▁a색 " qu는"있감 " ▁with다▁a▁withcolored▁of▁wrapped " qu▁class가스▁and "

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

그리고 내 CSS에서 나는 목표를 정했습니다.<p>▁to▁and다니▁and변주습▁changed▁gave했경.display: inline

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

디스플레이를 인라인으로 설정하면 일반적으로 상속되는 스타일이 일부 손실됩니다.따라서 가장 특정한 요소를 대상으로 하고 나머지 설계에 적합하도록 용기의 스타일을 지정해야 합니다.이것은 단지 작업 시작점으로 사용됩니다.조심해서 사용하세요.CodePen에서 작업 데모

h1은 블록 수준 요소입니다.인라인 수준 요소이므로 스팬과 같은 것을 대신 사용해야 합니다(즉, 전체 행에 걸쳐 있지 않습니다).

당신의 경우, 저는 다음을 제안합니다.

스타일. 스타일.

.highlight 
{
   background-color: green;
}

html

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

.<h1>또는<div>텍스트가 위치합니다.

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

문단 및 제목 태그 내에서 html5 표시 태그를 사용할 수 있습니다.

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

쉽게:

<p>lorem ibsum....</p>

스타일 포함:

p{
    background-color: #eee;
    display: inline;
}

---

배경이 요소의 전체 크기로 설정됩니다. 여기서 인라인 요소와 블록 요소 간의 차이를 수정합니다.

HTML 마크업을 변경하지 않고

이 당신의 변지않경우는려를 변경하기를 .html사용할 수 있는 태그:

h1 {
    background-color: green;  
    display: inline-block;
}

HTML 마크업 변경 시

은 HTML5 은를작있수수습다니행할용을 사용하여 할 수 .<mark>꼬리표를 달다

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

calc가 모든 브라우저와 호환되는 것은 아님을 유의하시기 바랍니다 :) 그냥 원래 게시물의 정렬과 일치하기를 원합니다.

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

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

코데펜 데모

<mark>로 꼬리표를 달다.background-color나를 도왔습니다.

입력:

<p>
    Effective <mark style="background-color: light-gray">Nov 1, 2022</mark> We will be lowering our price.
</p>

출력: 유효Nov 1, 2022우리는 가격을 낮출 것입니다.

참조

당신은 h1 태그의 폭을 언급해야 합니다.

당신의 CSS는 이렇게 될 것입니다.

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

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

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

언급URL : https://stackoverflow.com/questions/14310154/how-do-i-set-a-background-color-for-the-width-of-text-not-the-width-of-the-enti