如何使用CSS为文本的宽度而不是整个元素的宽度设置背景色？

143

我想要的是绿色背景位于文本的后面，而不是页面宽度的100％。这是我当前的代码：

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

html  css 
— 日立纸袋
source
可以不用跨度就可以做到吗？
— thomas-peter 2013年
为了避免增加跨度，您可以将<h1> display属性从block更改为inline（catch是，您必须确保<h1>之后的元素是block element。）
— Dan

Answers:

185

将文本放入内联元素中，例如<span>。

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

然后将背景颜色应用于内联元素。

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

内联元素与其内容一样大，因此应该为您完成。

— BalusC
source
6
谢谢，真可惜，我无法修改HTML。
— thomas-peter
@tom：您可以使用JavaScript来输入跨度。–
— BalusC
1
谢谢，但是我只有修改CSS的权限。没关系。
— thomas-peter
20
只需将display css规则添加到h1选择器中，就不必添加<span>标签。像这样：h1 { display:inline; }
— 卢多-纪录破纪录的2014年
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伪元素:: before和:: after的更多信息，请访问 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>
展开摘要

关于

此CSS技巧文章中的更多内容transform: translate();（和一般居中）

选项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/

更多的选择

通过结合上面的不同显示选项和居中方法，还有其他几种方法可以解决此问题。

— 哈斯蒂格·祖萨曼斯泰伦
source
在没有容器且没有伪元素的情况下做到这一点真是太棒了！不知道它display: table可能如此强大，但我感谢您提供了可行的替代方案。
— CPHPython
52

游戏有点晚了，但我想我会加2美分...

为了避免添加内部范围的额外标记，您可以将<h1>display属性从更改block为inline（catch是，您要确保<h1>are块元素之后的元素。

的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/

— 担
source
2
正确？真？这样，标题不再居中（因为它是内嵌显示的）。OP的问题显然包括居中标题的要求。
— BalusC 2014年
1
@BalusC-在原始问题中，OP是否明确指出标题必须居中？该问题明确询问如何使绿色背景不全宽。#justSaying
— 丹
2
OP的屏幕截图和OP的初始CSS表示相反。
— BalusC 2014年
5
也许可以，但是我们在这里谈论的是细节而非假设。
— 2014年
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> 标签内联元素标签中，因此它将仅覆盖伪造效果的内容。

— 斯塔克斯
source
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上的工作演示

— 加拉多
source
3

h1是块级元素。您将需要使用诸如span之类的东西，因为它是一个内联级别的元素（即：它不跨越整个行）。

对于您的情况，我建议以下几点：

style.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>
— 安迪
source
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>
展开摘要

— 柯本
source
2

尝试删除文本对齐中心，然后将<h1>或<div>文本居中对齐。

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}
— 不可知的发展
source
1

您可以使用HTML5 <mark>标签。

HTML：

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

CSS：

mark
{
    background-color: green;
}
— 丹·布雷
source
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/

— 理查德·费拉罗
source
0

您必须提及h1标签的宽度。

您的CSS会像这样

h1 {
text-align: center;
background-color: green;
width: 600px;
 }
— 拉米亚
source
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.
  }
}

Codepen上的演示

— 铁力士
source
Firefox需要box-decoration-break: clone;，developer.mozilla.org
— en-
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; 
}
— 幸运四号
source
3
如果您可以在答案中添加一些上下文，则任何仅代码的答案对于正在寻找此问题的解决方案的人都将变得更加有用。
— David Buck
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.