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

【问题标题】：How to change the background color of TEXT in css如何在css中更改TEXT的背景颜色
【发布时间】：2017-06-26 19:54:03
【问题描述】：

我们举个例子：

<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: " ";}

【问题讨论】：

How do I set background color of text only in CSS?的可能重复
这在纯 css 中是不可能的，除了一些相当笨重的解决方案。如果可以的话，最好的办法是更改标记。
你最好的选择是display:table-cell - 详细答案如下。

标签： html css

【解决方案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;
}

&lt;div id="div1"&gt;This is a sentence.&lt;/div&gt;

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

【讨论】：

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

【解决方案2】：

你可以使用display:table-cell

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

另外，除非你想回到黑暗时代，否则这里是well-supported

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

【讨论】：

在我的示例中使用inline-block 或table-cell 只会破坏hyper。（换行符），但多亏了你的想法，我发现display:table; 成功了。 ;)
@bobdylan 太好了！我很高兴你知道了。谢谢！

【解决方案3】：

[块元素总是取宽度为 100%，而内联块取元素本身的宽度。所以尝试对 div 内的元素使用内联块 CSS] Display:inline-block;

1 例如：

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

Codepen link

【讨论】：

【解决方案4】：

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

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

【讨论】：