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

Question

我需要制作一个背景颜色的标题,这不是一个块(只有text-bg是彩色的).

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

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

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

我很高兴每一个提示!

解:

约翰史密斯做了一个工作的例子: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

如今（自从发布这个问题以来，理解已经过去了很多年），如果您愿意使用实验技术并主要关注现代浏览器（并且可以接受在不受支持的浏览器上没有它的外观），您可以使用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)。