文本周围的背景颜色

Question

我有一个在div中的H1标题，由于div的宽度固定，因此跨越了多行。我想将背景色仅设置为H1文本，以便背景仅在文本后面保留（例如，如果行末有空白，则不应在那里使用背景颜色）。

另外，我需要设置文本的左右填充。我尝试将padding设置为标题，但也无效。

这是我想要的效果：

我试图通过设置H1的inline显示和背景颜色来实现这一点，但似乎不起作用。以下是我的HTML和CSS以及演示。

HTML:

<div class="box">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget massa felis, at aliquam libero. </h1>

CSS:层叠样式表

.box{
    background: green;
    overflow: hidden;
    max-width: 100px;
    margin: 50px auto;
    padding: 20px;
}

h1{   
    background: yellow;
    font-size: 30px;   
    float: left;
    display: inline;   
}

示例: http://jsfiddle.net/BQMXa/

- user1251698

---

一个复杂的CSS-only答案在这里：https://dev59.com/F2445IYBdhLWcg3wLXWh。他们建议最好使用JavaScript来完成此操作。 - mccannf

Answer 1

移除你的 h1 中的 float:left

演示

- Rohit Azad Malik

---

谢谢您的回复，但问题是我想要为标题添加左右填充，似乎不起作用。 - user1251698

@user1251698，设置padding正常工作，例如h1 { padding: 0 1em }会在开头和结尾添加1em的填充。看起来你想要其他的东西 - 可能只有通过将标题文本分成几个元素才能实现，每个元素显示在自己的一行上（固定分成几行）。 - Jukka K. Korpela

Answer 2

float: left 不是必要的，请将其删除。

此外，您可能希望减小 line-height，使其看起来像演示文稿（如果不这样做，文本下方会有空白行，这可能是不希望出现的）。

- Simone

---

谢谢回复。我该如何设置标题文本的左右填充？ - user1251698

请阅读此内容：内联元素和填充 - Simone