Question

让我们举个例子：

<div id="div1">This is a sentence.</div>

<div>填满该行的100％。

文本本身，只是其中的一小部分。

我想给文本一个背景颜色，而不是给整行提供背景颜色。

我可以更改html并添加span当然。（并使用此范围与background-color）

<div id="div1"><span>This is a sentence.</span></div>

但是在纯css中是否可以，而不更改html？

PS：我正为hyper终端制作css代码。

解决方案（适用于所有div）：

div{display:table;}

这完全破坏了tmux行为（在hyper内），但也许我要求太多......

echo -e "\n\n"也成了问题。：P

解决这个问题:(空div没有空间）

div:after{content: " ";}

Answer 1

您可以使用:before在

上应用CSS

＆＃13;

#div1 {
  color: blue; // hide original text
  background-color: blue;
  position: relative;
}

#div1:before {
  content: 'This is a sentence.';
  background-color: purple;
  display: inline;
  color: white;
  position: absolute;
}

＆＃13;

<div id="div1">This is a sentence.</div>

＆＃13;

如果您不需要#div1为全宽，那么只需将#div1 {display: inline-block}应用于它，它就会充当span元素

Answer 2

[块元素的宽度始终为100％，而内联块的宽度为元素本身。所以尝试使用内联块CSS到div内的元素] Display:inline-block;

1 至于例如：

[https://codepen.io/nazarbecks/pen/GEMdaG][1]

Codepen link

Answer 3

您可以将#div1设为inline-block。

#div1 {
  display: inline-block;
  background-color: color;
}

如何在css中更改TEXT的背景颜色

3 个答案: