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

Question

I need to make a Headline with background color which is not a block(only the text-bg is colored).

Here is an image of what I have to archieve:

And here is what I've got so far: http://jsbin.com/tiwuquze/1/edit

You can see the padding is not right and I couldn't figure how to set it. When you play around with the padding, you will see that it will overlap and the second line is not going in like the first one.

I am happy about every hint!

Solution:

John Smith made a working example: http://jsbin.com/tiwuquze/21/edit He used box-shadow to emulate the left padding.

Answer 1

UPDATE got the solution, use box shadow :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 */

}

for me this looks good

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

Answer 2

Try setting a bigger padding and use line-height example :

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

Answer 3

Nowadays (understanding years have passed since this question was posted), if you were willing to use experimental technology and concerned primarily with modern browsers (and could accept how it looked without it on unsupported browsers), you could use box-decoration-break .

The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

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

Also, for what it's worth, box-shadow -based solutions don't seem to work for me in Firefox 55.0.3 (Windows 7) nor Firefox Quantum 62.0.3 (Windows 10) at time of writing.

Answer 4

You can do as @ReKnawn suggested increase the padding and line-height just ensure that the line height is larger than the font-size + padding x 2 since in this case both the top and bottom are padded. eg if the font-size is 16 and padding is 4px line-height must be greater than 24 to ensure reasonable space and avoid overlapping

Answer 5

here check this solution:

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

Add a span inside the h1 element.