h1中的CSS跨度填充和背景答案

【问题标题】：CSS span padding & background in h1h1中的CSS跨度填充和背景
【发布时间】：2011-10-18 05:45:48
【问题描述】：

我使用 H1 标记作为标题文本，并在其中使用 SPAN 标记以添加背景颜色和填充，例如：

问题是当文本溢出到另一行时，SPAN 元素填充不会影响另一行上的文本。

请问有人对如何解决有任何想法吗？（我已经查看/尝试了此处的其他示例，但在使用“左边框”技术时遇到了问题 - 在所有浏览器中呈现不同。）有没有使用 jquery 的方法？干杯，S。

编辑：

认为我已经设法让这个工作正常 - 请参阅 http://jsfiddle.net/xqd87/124/

【问题讨论】：

标签： css

【解决方案1】：

根据您的评论，我能做的最好的就是将white-space:pre-wrap; 添加到.bg-box。这会在行尾的右侧为您提供所需的空间，但不幸的是不会在新行的左侧添加空间。

【讨论】：

【解决方案2】：

只需将display: block; 添加到.box-bg：http://jsfiddle.net/xqd87/87/

至少，我不明白你为什么需要跨度 - 可以像这样实现同样的事情：http://jsfiddle.net/xqd87/88/

【讨论】：

【解决方案3】：

内联元素的填充将在元素内文本的开头和结尾添加空格。如果要添加块元素的填充，请将其设置为display:block

【讨论】：

【解决方案4】：

在您的span 标签中写入display:block，因为span 是一个inline element，它不会在width 中添加vertical padding。

这就是为什么下一行没有考虑他的padding

【讨论】：

【解决方案5】：

我终于明白了。

这是我的解决方案： http://jsfiddle.net/AAyNq/

字间距由负文本缩进控制。 jQuery 会处理气味的第一个单词（参见 jQuery 中的 padding-left）

【讨论】：