css - 有没有更简单的方法来剪辑文本周围的背景？

Question

如果我在文本元素上放置背景颜色，它会自动拉伸到 100%。

通常我会用max-width它来剪辑它，偶尔margin，但必须有更好的方法（或者应该是，imo）。

这是一个 jsfiddle来演示我的意思。是否有另一种更容易/更有效地使背景接近文本的方法？

Answer 1

您可以添加到您的 H3 display : inline-block，它不会将其宽度拉伸到整个屏幕。并根据需要添加填充

Answer 2

添加一个内联子元素并将背景颜色添加到此...

因此，您的 HTML 将从

<h3 class="red">some text</h3>
<h3 class="red max">some text</h3>
<h3 class="red margin">some text</h3>
<h3 class="red custom">some text</h3>

至

<h3 class=""><span class="red">some text</span></h3>
<h3 class="max"><span class="red">some text</span></h3>
<h3 class="margin"><span class="red">some text</span></h3>
<h3 class="custom"><span class="red">some text</span></h3>

Answer 3

H3 是一个块元素，这意味着除非您指定特定的宽度和高度，否则它不会只绕过其内容。如果您希望它这样做，最简单的解决方案是将 H3 更改为内联的东西（即：SPAN）或将其包装到嵌套元素中。

<span class="red">some text</span>

或者

<h3><span class="red">some</span></h3>

Answer 4

这是因为 H3 是一个块元素。如果您不使用块元素（例如 SPAN），则背景颜色不会像您看到的那样被拉伸。

Answer 5

这有点像黑客：http: //jsfiddle.net/zuX3H/4/

h3 { color:white; margin:.2em auto; }
.red { background:red; display:inline; }
.red:after { content:"\A"; white-space:pre; }
* { text-align:center; }