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

我想要的是绿色背景正好在文本后面，而不是100%的页面宽度。这是我目前的代码：

h1{
文本对齐：居中；
背景颜色：绿色；
}

埃里克·琼斯的最后一份遗嘱

将文本放在一个字母中，如

---

内联元素与其内容一样大，因此您可以使用它。

尝试移除文本对齐中心，并将文本所在的

或

居中放置

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

---

一个非常简单的技巧是添加一个

标记并添加背景色。它看起来正是你想要的样子

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

为什么？

---

标记在内联元素标记中，因此它只会覆盖假装效果的内容。

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

就你而言，我建议如下：

style.css

.highlight 
{
   background-color: green;
}

html

只会突出显示文本

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

为了避免添加内部跨距的额外标记，您可以将

显示属性从

块更改为
内联
（关键是您必须确保
之后的元素是块元素

HTML

<h1>  
The Last Will and Testament of
Eric Jones</h1> 
<p>Some other text</p>

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1> 

结果



JSFIDLE
选项1
显示：表格；


不需要家长


h1{
显示：表格；/*将背景色紧紧包裹*/
边距：0px auto 0px auto；/*保持表格居中*/
填充：5px；字体大小：20px；背景颜色：绿色；颜色：#ffffff；
}
埃里克·琼斯最后的遗嘱
试试这个：

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不兼容所有浏览器：）只是希望与原始帖子中的对齐方式保持一致

EDIT：以下答案适用于大多数情况。然而，OP后来提到，他们不能编辑CSS文件以外的任何内容。但是我会把它留在这里，这样它可能会对其他人有用。

其他人忽略的主要考虑是OP声明他们不能修改HTML

您可以针对DOM中需要的内容，然后使用javascript动态添加类。然后根据需要设计样式

在我制作的一个示例中，我用jQuery将所有
元素作为目标，并用一个带有“colored”类的div将其包装起来

通过将显示设置为“内联”，您将丢失它通常会继承的一些样式。因此，请确保以最具体的元素为目标，并根据设计的其余部分设置容器的样式。这只是一个工作的起点。小心使用。在
上进行演示，您可以使用HTML5
标记

HTML:

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

mark
{
    background-color: green;
}

你必须提到h1标签的宽度

你的css将是这样的

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

HTML

<h1>  
The Last Will and Testament of
Eric Jones</h1> 
<p>Some other text</p>

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1> 

HTML

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

如其他答案所述，您可以在文本周围的
中添加
背景色，以使其生效

但是，如果您有
行高
，您将看到间隙。要解决这一问题，您可以添加一个
框阴影
，使跨度稍微增大一点。您还需要
框装饰中断：克隆

编辑：如果您在IE11中遇到框阴影问题，请尝试添加
outline:1px solid[color]仅适用于IE

下面是它在运行中的样子：



.container{
保证金：0自动；
宽度：400px；
填充：10px；
边框：1px纯黑；
}
氢{
保证金：0；
填充：0；
字体系列：Verdana，无衬线；
文本转换：大写；
线高：1.5；
文本对齐：居中；
字体大小：40px；
}
h2>span{
背景色：#D32；
颜色：#FFF；
盒影：-10px 0px 0 7px#D32，
10px 0px 0 7px#D32，
0 7px#D32；
盒子装饰破裂：克隆；
}

背景色加上方框阴影的标题：3

埃里克·琼斯的最后遗嘱可以在段落和标题标记中使用html5标记


lorem ipsum突出显示文本dolor sit。
轻松：

背景设置为元素的整体大小；
修改内联元素和块元素之间的差异
是否可以在不添加跨距的情况下执行此操作？为避免添加跨距，您可以将
显示属性从块更改为内联（问题是你必须确保
之后的元素是块元素。谢谢，很遗憾，我不能修改HTML。@汤姆：你可以使用JavaScript来添加一个span。谢谢，但我只有修改CSS的权限。不用担心。只要将显示CSS规则添加到h1选择器中，你就不必添加标记。像这样：
h1{display:inline；}
display:table是一个更好的选择…以避免在下一个答复的注释部分中突出显示的问题。display:inline将连接并在同一行中…当它们最初在下一行中时。正确吗？真的吗？这样标题就不再居中（因为它是内联显示的）.OP的问题显然包括对居中标题的要求。@BalusC-OP在原始问题中没有明确说明标题必须居中。问题清楚地提出了如何使绿色背景不全宽。#只是说，OP的屏幕截图和OP的初始CSS暗示了另一种情况。这可能，但我们是好的king在此详细说明-而不是假设。这增加了一些情况下的问题..如果和标记立即出现在下一行中..那么和将显示在同一行中。下面的显示
mark
{
    background-color: green;
}

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

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1> 

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

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

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

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

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