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

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

 #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元素

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. 

Answer 3

[塊元素的寬度始終為100％，而內聯塊的寬度為元素本身。 所以嘗試使用內聯塊CSS到div中的元素] Display:inline-block;

1 至於：

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

Codepen鏈接

Answer 4

你可以將#div1設置為inline-block 。

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