如何在CSS中更改文本的背景颜色

Question

让我们举个例子：

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

标签会占据整行的宽度。

只有少部分文字需要设置背景色。

我想要为文字设置背景色，而不是整行。

当然可以修改HTML代码，在文字周围添加标签，并使用标签的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:after{content: " ";}

- bob dylan

---

可能是如何在CSS中仅设置文本背景颜色？的重复问题。 - sol

在纯CSS中，这实际上是不可能的，除非采用一些相当笨拙的解决方案。如果可以的话，最好更改标记。 - Chris

你最好的选择是 display:table-cell - 详细答案如下。 - I haz kode

Answer 1

您可以使用：before在HTML元素之前应用CSS。

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

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

---

如果您不需要 #div1 充满整个宽度，那么只需将 #div1 {display: inline-block} 应用于它，它将像 span 元素一样运作。

- Justinas

---

丑陋，但可能是唯一的解决方案。 - Chris

Answer 2

您可以使用display:table-cell

table-cell：使元素表现得像<td>元素 - W3Schools

此外，除非您想回到黑暗时代，否则这是得到良好支持的。

#div1 {
  background: red;
  color: white;
  display: table-cell;
}

<div id="div1">This is a sentence.</div>Lorem ipsum dolor sit amet, pri cu quod audiam molestie, sit an modo probo conceptam, vim nemore quodsi no. Postea possit ne pro. Ne mel mollis oportere laboramus. Eu dico eius omnes ius. Id vis nibh adipiscing, maiorum suscipit ius eu. Sonet viris antiopam
nec in, est id equidem omnesque cotidieque, tritani detraxit qui cu.

- I haz kode

---

在我的例子中使用inline-block或table-cell只是破坏了hyper（换行），但多亏了你的想法，我发现display:table;解决了问题。 ;) - bob dylan

@bobdylan 太好了！我很高兴你解决了这个问题。谢谢！ - I haz kode

Answer 3

[块元素始终占据100％的宽度，而内联块占据元素本身的宽度。因此，请尝试将CSS的inline-block属性应用于div中的元素]

display: inline-block;

1 例如：

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

Codepen链接

- Nazar Becks

Answer 4

你可以将 #div1 设置为 inline-block。

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

- Mebtte