内联文本 - 与填充的背景颜色

Question

我需要制作一个背景颜色的标题，这不是一个块（只有text-bg是彩色的）。

这是我必须达到的目标的形象：

这是我到目前为止所得到的： http://jsbin.com/tiwuquze/1/edit

您可以看到填充不正确，我无法确定如何设置它。 当您使用填充时，您将看到它将重叠，第二行不会像第一行那样进入。

我很满意每一个提示！

解决方案：

John Smith做了一个工作的例子：http://jsbin.com/tiwuquze/21/edit 他使用box-shadow来模拟左边填充。

Answer 1

UPDATE得到了解决方案，使用框阴影：D

h1 {
    background-color: #FE8020;
    color: #FFFFFF;
    display:inline;
    white-space:pre-wrap;
    line-height : 24px;
    font-size: 18px;
    font-family:arial, sans-serif;
    padding: 5px;
    padding-left:0px;
    box-shadow: -16px 0 0 #FE8020; /* box shadow is emulating padding liek a charme */

}

对我来说这看起来不错

http://jsbin.com/tiwuquze/21/edit

Answer 2

尝试设置更大的填充并使用行高 例如：

line-height:24px;
padding:4px; 

Answer 3

现在（从发布此问题开始已经了解了很多年），如果您愿意使用experimental technology并且主要关注现代浏览器（并且可以接受不支持浏览器时的外观），则可以使用box-decoration-break。

  

box-decoration-break CSS属性指定在跨多行，多列或多页时，应如何呈现元素的片段。

h1 {
    background-color: #FE8020;
    color: #FFFFFF;
    display:inline;
    white-space:pre-wrap;
    line-height : 24px;
    font-size: 18px;
    font-family:arial, sans-serif;
    padding: 5px;padding-left:0px;box-shadow: -16px 0 0 #FE8020;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

https://jsbin.com/hadedulici/1/edit

此外，就其价值而言，在撰写本文时，基于box-shadow的解决方案似乎不适用于Firefox 55.0.3（Windows 7）或Firefox Quantum 62.0.3（Windows 10）。

Answer 4

你可以这样做，因为@ReKnawn建议增加填充和行高，只需确保行高大于font-size + padding x 2，因为在这种情况下，顶部和底部都是填充的。例如，如果font-size为16且padding为4px，line-height必须大于24，以确保合理的空间并避免重叠

Answer 5

这里检查一下这个解决方案：

http://jsbin.com/tiwuquze/17/edit

在h1元素中添加一个span。