Question

我在div中有一些多行文字，我可以用背景颜色包围文本，其大小根据文字改变吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我可以使用背景颜色环绕文本，其大小根据文本更改吗？

假设您不能（或不希望）将文本放入其自身可以应用背景的内联元素中，那么您的选项有限。

我能想到的唯一选择就是将文字单独应用于任何类型的背景颜色，sonarqube { properties { def compileDependencies = project.configurations.compile.files.collect {it.path}join(",") def compileOnlyDependencies = project.configurations.compileOnly.files.collect {it.path}join(",") property "sonar.java.libraries", "$compileDependencies,$compileOnlyDependencies" property "sonar.test.libraries", "$compileDependencies,$compileOnlyDependencies" } }，您需要多个阴影。

JSfiddle Demo

text-shadow

  .multiline
{
  padding:0px;
  white-space: pre-wrap;
  height: 100px;
  width: ;
  margin:0px;
  text-shadow: 
  0 0 1px green,
  0 0 2px green,
  0 0 3px green,
  0 0 4px green,
  0 0 5px green,
  0 0 6px green,
  0 0 7px green,
  0 0 8px green,
  0 0 9px green;
  }

CSS背景颜色环绕文本

4 个答案: