Як встановити колір тла для ширини тексту, а не ширини всього елемента за допомогою CSS?


143

Я хочу, щоб зелений фон знаходився прямо за текстом, а не на 100% від ширини сторінки. Ось мій поточний код:

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


Це можна зробити, не вставляючи проліт?
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; 
}

Вбудований елемент настільки ж великий, як і його вміст, так що це потрібно робити вам.


6
Дякую, прикро, я не можу змінити HTML.
томас-петер

@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 і тут


Варіант 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 Трюки та псевдоелементи взагалі в 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:

  • не те, що шукала ОП, але може бути корисною для інших, хто шукає тут свій шлях.

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>властивість відображення з 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/


2
Правильно? Дійсно? Таким чином заголовок більше не зосереджений (тому що відображається в рядку). Питання ОП чітко включає вимогу по центру заголовка.
BalusC

1
@BalusC - Ні, де в оригінальному запитанні ОП конкретно зазначено, що заголовок повинен бути зосереджений. Питання чітко задає питання, як зробити так, щоб зелений фон не перейшов на повну ширину. #justSaying
Dan

2
Скріншот OP і початковий CSS OP означають інше.
BalusC

5
Це може бути, але ми говоримо тут про конкретику - не припущення.
День

1
це додало проблеми в тих випадках, коли теги <h1> і <h2> негайно знаходяться в наступних рядках ... тоді <h1> і <h2> будуть відображатися в одному рядку. Наведений нижче параметр display: table - хороший вибір, якщо ви не хочете змінити вихідний код тегів <h1> <h2>, а лише змінити css.
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

EDIT: відповідь нижче застосовується в більшості випадків. Однак пізніше OP зазначив, що вони не можуть редагувати нічого, крім файлу CSS. Але залишимо це тут, щоб воно могло бути корисним іншим.

введіть тут опис зображення

Основна думка, яку інші нехтують, полягає в тому, що ОП заявило, що вони не можуть змінювати HTML.

Ви можете орієнтуватися на те, що вам потрібно в DOM, а потім додавати класи динамічно за допомогою JavaScript. Тоді стиль, як вам потрібно.

На прикладі, який я зробив, я націлив усі <p>елементи на jQuery і обернув його дівом із класом "кольорові"

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

Потім у моєму CSS я націлив <p>та надав йому колір тла та змінив наdisplay: inline

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

Встановивши дисплей на вбудований, ви втрачаєте частину стилю, який він зазвичай успадковує. Тому переконайтеся, що ви орієнтуєтесь на найбільш конкретний елемент та стилюєте контейнер так, щоб він відповідав іншій частині вашого дизайну. Це просто розуміється як робоча відправна точка. Використовуйте обережно. Робоча демонстрація на CodePen


3

h1 - елемент рівня блоку. Натомість вам потрібно буде використовувати щось на зразок span, оскільки це елемент вбудованого рівня (тобто: він не охоплює весь ряд).

У вашому випадку я б запропонував таке:

style.css

.highlight 
{
   background-color: green;
}

html

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

3

Як зазначають інші відповіді, ви можете додати 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

Ви можете використовувати <mark>тег HTML5 .

HTML:

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

CSS:

mark
{
    background-color: green;
}

1
ОП потребував єдиного 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.
  }
}

Демонстрація на кодпені


Firefox вимагає box-decoration-break: clone;, developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
Coburn

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

3
Будь-яка відповідь, що стосується лише коду, може бути набагато кориснішою людям, які шукають рішення цієї проблеми, якби ви могли додати певний контекст до своєї відповіді.
Девід Бак

-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 вже не сказали обох
Квентін
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.