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

Posted 2023-01-15

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

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

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

答案

将文本放入inline element，例如<span>。

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

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

h1 
    text-align: center; 

h1 span  
    background-color: green; 

内联元素的大小与其内容一样大，所以应该为您做到这一点。

另一答案

尝试这个：

mark

    background-color: green;

请注意，calc
与所有浏览器都不兼容：)只想与原始文章中的对齐方式保持一致。

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

另一答案

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

您的CSS将是这样

https://jsfiddle.net/richardferaro/ssyc04o4/ 
HTML
另一答案
HTML
另一答案
html
Demo on codepen
CSS
<h1 class="green-background"> Whatever text you want. </h1>
另一答案
另一答案
游戏有点晚了，但以为我会加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;

结果
JSFIDDLEhttp://jsfiddle.net/J7VBV/
另一答案
选项1
另一答案
这样做的一个非常简单的技巧是添加一个https://jsfiddle.net/Hastig/t8L9Ly8o/标签并为其添加背景颜色。它看起来就像您想要的样子。
<span>
和CSS
另一答案
编辑：下面的答案将在大多数情况下适用。但是，OP随后提到，除了CSS文件之外，他们无法编辑其他任何内容。但是将其保留在此处，以便对他人有用。
<span>
其他人忽略的主要考虑因素是OP声明他们无法修改HTML。 
另一答案
h1是块级元素。您将需要使用诸如span之类的东西，因为它是一个内联级别的元素（即：它不跨越整个行）。
根据您的情况，我建议以下内容：
style.css
CodePen
html
另一答案
尝试删除文本对齐中心并使文本所在的<span class="highlight">only the text will be highlighted</span>
或<h1>居中。
<div>
 
作为其他答案，您可以在文本周围的h1 
    background-color:green;
    margin: 0 auto;
    width: 200px;

上添加background-color以使其正常工作。
另一答案
作为其他答案，您可以在文本周围的h1 
    background-color:green;
    margin: 0 auto;
    width: 200px;

上添加background-color以使其正常工作。
另一答案
您可以使用HTML5 <div class="container">
    <h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>标签。
HTML：
以上是关于如何使用CSS为文本的宽度而不是整个元素的宽度设置背景色？的主要内容，如果未能解决你的问题，请参考以下文章
 
 如何根据自己的宽度而不是父 div 将 CSS 边距/填充设置为子 div？
 JS Game 使用 CSS 而不是 JS 将响应的高度和宽度设置为画布
 增加跨度宽度而不是文本宽度 - CSS
 对齐行内块中心
 ASP.NET CSS - 将文本框设置为 div 的 100% 宽度
 将宽度设置为100％时，输入文本元素流出容器元素[重复]