文本周围的CSS背景色

Question

我在div里面有一些多行文本，我可以用大小随文本改变的背景颜色来包围文本吗？

​

.multiline{
  padding:0px;
  white-space: pre-wrap;
  height: 100px;
  width: ;
  margein:0px
}

<div style="background-color:#FFD382;" align="left" class="multiline">
  Peter
  How are you
  2016-8-10
</div>  

​

Answer 1

<div align="left" class="multiline">
   <span style="background-color:#FFD382;">Peter<br/>How are you<br/>2016-8-10</span>
</div>  

Answer 2

您必须将文本设置为inline-element。因此，您可以设置文本的background-color和周围区域的background-color。

请参见以下示例：

​

.multiline {
  padding:0px;
  white-space: pre-line;
  height: 100px;
  margin:0px
}
span {
  background:white;
}

<div style="background-color:#FFD382;" align="left" class="multiline">
  <span>Peter
  How are you
  2016-8-10</span>
</div>

​

通过在display:inline .multiline中添加，您也可以使用实际的解决方案

​

.multiline {
  display:inline;
  padding:0px;
  white-space: pre-line;
  height: 100px;
}

<div style="background-color:#FFD382;" align="left" class="multiline">
  Peter
  How are you
  2016-8-10
</div>

​

Answer 3

尝试用span代替div，用pre-line代替pre-wrap

​

.multiline {
  padding: 0px;
  white-space: pre-line;
  height: 100px;
  margin: 0px
}

<span style="background-color:#FFD382;" class="multiline">
 Peter
 How are you
 2016-8-10
</span>

​