Question

如果我在文本元素上添加背景颜色，它会自动延伸到100％。

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

Here's a 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是块元素。如果您不使用块元素（例如SPAN），背景颜色将不会像您看到的那样被拉伸。

Answer 4

这有点像黑客：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; }

Answer 5

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

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

或

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

是否有更简单的方法来剪切文本背景？

5 个答案: