CSS를 사용하여 전체 요소의 너비가 아닌 텍스트 너비의 배경색을 어떻게 설정합니까?

143

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

h1 { 
    text-align: center; 
    background-color: green; 
}
<h1>The Last Will and Testament of Eric Jones</h1>
스 니펫 확장

html  css 
— 히 토레 종이 봉지
소스
스팬을 넣지 않고이 작업을 수행 할 수 있습니까?
— thomas-peter
. 당신이 캐치 당신이 <H1>는 블록 요소 이후의 요소 보장 것입니다 (인라인에 블록에서 <H1> 디스플레이 속성을 변경 할 수있는 범위에 추가 피하기 위해
— 댄

답변:

186

텍스트 를 a와 같은 인라인 요소 에 넣습니다 <span>.

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

그런 다음 인라인 요소에 배경색을 적용하십시오.

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

인라인 요소는 내용만큼 크므로 그렇게해야합니다.

— BalusC
소스
6
감사합니다. 부끄러운 일입니다. HTML을 수정할 수 없습니다.
— thomas-peter
@tom : JavaScript를 사용하여 범위를 입력 할 수 있습니다.
— BalusC
1
고맙지 만 CSS를 수정할 권한 만 있습니다. 신경 쓰지 마.
— thomas-peter
20
디스플레이 CSS 규칙을 h1 선택기에 추가하기 만하면 <span> 태그를 추가 할 필요가 없습니다. : 이것처럼h1 { display:inline; }
— 오프 더 레코드 - 루
2
display : table이 더 나은 선택입니다 ... 다음 회신의 주석 섹션에서 강조 표시된 문제를 피하십시오. display : inline은 원래 다음 줄에있을 때 <h1>과 <h2>를 같은 줄에 연결합니다.
— ihightower
65

옵션 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 및 here 에 대한 자세한 내용

옵션 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>
스 니펫 확장

약

아마도 Flexbox에 대한 가장 인기있는 가이드와 내가 지속적으로 참조하는 가이드는 CSS Tricks에 있습니다.

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

추가 옵션

위의 다른 디스플레이 옵션과 센터링 방법을 결합하여이 문제를 해결하는 몇 가지 다른 방법이 있습니다.

— 하스 티그 주암 멘 스텔 렌
소스
컨테이너와 의사 요소 없이이 작업을 수행하는 것은 간단합니다! 그 기능 display: table이 그렇게 강력 할 수 있다는 것을 몰랐지만 작업 대안을 제공해 주셔서 감사합니다.
— CPHPython
52

게임에 조금 늦었지만 2 센트를 더할 것이라고 생각했습니다.

내부 스팬의 추가 마크 업을 추가하지 않으려면 <h1>display 속성을에서 block로 변경할 수 있습니다 inline(catch는 <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/

— 단
소스
2
옳은? 정말? 이렇게하면 제목이 더 이상 중앙에 표시되지 않습니다 (인라인으로 표시되기 때문에). OP의 질문에는 명확하게 중심 제목에 대한 요구 사항이 포함됩니다.
— BalusC
1
@BalusC-원래 질문에서 OP가 구체적으로 제목을 중앙에 위치시켜야한다고 말하는 곳은 없습니다. 이 질문은 녹색 배경을 전체 너비로 만들지 않는 방법을 분명히 묻습니다. #justSaying
— Dan
2
OP의 스크린 샷과 초기 CSS는 그렇지 않다는 것을 암시합니다.
— BalusC
5
아마도, 그러나 우리는 가정이 아닌 구체적인 내용을 이야기하고 있습니다.
— Dan
1
<h1>과 <h2> 태그가 바로 다음 줄에 있으면 <h1>과 <h2>가 같은 줄에 표시됩니다. <h1> <h2> 태그 자체의 소스 코드를 변경하지 않고 CSS 만 변경하려는 경우 아래 display : table 옵션을 선택하는 것이 좋습니다.
— ihightower
8

그렇게하는 간단한 방법은 <span>태그 를 추가하고 배경색을 추가하는 것입니다. 원하는대로 보일 것입니다.

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

그리고 CSS

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

왜?

<span> 인라인 요소 태그에 태그를 추가하면 효과를 나타내는 내용에만 적용됩니다.

— 스탁스
소스
4

편집 : 아래의 답변은 대부분의 경우에 적용됩니다. 그러나 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 실무 데모

— J 갈라 르도
소스
3

h1은 블록 레벨 요소입니다. 인라인 레벨 요소이므로 span과 같은 것을 사용해야합니다 (즉, 전체 행에 걸쳐 있지 않음).

귀하의 경우 다음을 제안합니다.

style.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>
— 앤디
소스
3

다른 답변에서 알 수 있듯이 텍스트 주위 에 a background-color를 추가 <span>하여이 작업을 수행 할 수 있습니다.

당신이 line-height그래도 경우에 , 당신은 간격을 볼 수 있습니다. 이 문제를 해결 box-shadow하기 위해 스팬에 약간의 성장을 추가 할 수 있습니다 . box-decoration-break: clone;FireFox가 올바르게 렌더링하기를 원할 것입니다.

편집 : 상자 그림자와 함께 IE11에서 문제가 발생하면 outline: 1px solid [color];IE에만 잘 추가하십시오 .

실제 모습은 다음과 같습니다.

CSS 기술의 예

.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>
스 니펫 확장

— 코번
소스
2

텍스트 정렬 센터를 제거하는 시도하고 센터 <h1>또는 <div>에서 텍스트 상주.

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}
— 불가지론
소스
1

HTML5 <mark>태그를 사용할 수 있습니다 .

HTML :

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

CSS :

mark
{
    background-color: green;
}
— 댄 브레이
소스
1
OP는 CSS 전용 솔루션이 필요했습니다
— JGallardo
0

이거 한번 해봐:

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/

— 리차드 페라로
소스
0

h1 태그의 너비를 언급해야합니다.

당신의 CSS는 다음과 같습니다

h1 {
text-align: center;
background-color: green;
width: 600px;
 }
— 라미아
소스
0

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

코드 펜 데모

— 티 그로스
소스
파이어 폭스는 필요 box-decoration-break: clone;, developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
— 코번
0

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; 
}
— LuckyThe4thJr
소스
3
코드 전용 답변은 답변에 컨텍스트를 추가 할 수 있다면이 문제에 대한 해결책을 찾는 사람들에게 훨씬 유용 할 수 있습니다.
— David Buck
-2 

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

— 애니 쉬 쿠마 굽타
소스
잘. 그것은 몇 가지 코드입니다. 일부 코드입니다. 설명이 전혀 없습니다. 제목이 그 주변의 내용과 관련하여 동작하는 방식을 변경하면 부작용이 있습니다. 그것은 아무것도 말한다 stackoverflow.com/a/32919558/19068 및 stackoverflow.com/a/20257339/19068은 모두 이미 말했다하지 않은
— 쿠엔틴
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.