CSS: aplique relleno al elemento en línea en dos líneas

I have to create a style to apply a background color and padding to a header element, resulting the following intended appearance (Photoshop mock-up):

My CSS is as follows (edited to show relevant rules)

h1 {
    color: #fff;
    line-height: 1.4;
    background: #41a293;
    padding: 2px 4px; 

Esto produce el siguiente resultado:

I get padding at the start of the element ('S'), and at the very end ('e'), but not where the text breaks. The break happens due to the width of it's parent DIV. This will happen often and is necessary.

Is there any way to ensure the element gets even padding at the points where the text breaks?

Muchas gracias Dave

EDIT - I should have also said that the text content will display via a CMS (Wordpress).

preguntado el 27 de agosto de 11 a las 14:08

@thirtydot - yep 80% of users for this site IE :) -

Echa un vistazo a mi Pregunta anterior. It took me several time and a bounty to get this work, but in the end I got it! -

What kind of solution do you want? CCS, JS, either or both? -

10 Respuestas

If you're okay with the effect only being visible in WebKit/Blink browsers, you should use

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

Which does exactly what you want, like here: http://jsfiddle.net/Cnuzh/13/

Respondido 15 Oct 13, 13:10

Dunno if it's the best solution for the ts, but it really helped me! Tnx - f4der

for IE you can use 'white-space: pre-wrap' instead - tibalt

Inline elements do not support padding and margin well, so make it block or inline-block (which is not cross browser) Why are you making it inline btw?

Respondido el 03 de Septiembre de 11 a las 15:09

Because if if is not inline, the result looks like this: cl.ly/1d2c261m0N1P1Z2C113Y - David

si agregas


to your h1 it will look like this :

enter image description here

Still trying to figure a way to add the space before the (i) !

EDIT : Check this out : http://jsfiddle.net/ahmad/6qVVD/10/

--Still need a way to wrap the last word with jQuery--

Wrapping the last word with a span using jQuery

$('h1').each(function(index, element) {
    var heading = $(element), word_array, last_word, first_part;

    word_array = heading.html().split(/\s+/); // split on spaces
    last_word = word_array.pop();             // pop the last word
    first_part = word_array.join(' ');        // rejoin the first words together

    heading.html([first_part, ' <span>', last_word, '</span>'].join(''));

Ejemplo de trabajo: http://jsfiddle.net/6qVVD/12/

As you see it's working perfectly

Respondido el 11 de Septiembre de 11 a las 05:09

Do you know a way to wrap the last word using jQuery? Thanks for your response. - David

Updated the answer and added a way to wrap the last word with span - Ahmad Alfy

This only works with that exact phrase. if you increase the length of text you still have issues: jsfiddle.net/6qVVD/48 - deweydb

My boss loves using this feature in his designs recently, so I've had to come up with some solutions. Luckily for most of the ones we're doing, they are for titles on Sliders which will always be on two lines, so I took to using before and afters to insert a 10px line before each line of text. Not great cross browser compatibility I know, but works okay and doesn't look appalling in IE.

Here's a little jsFiddle to explain it:


This is the only pure CSS solution I could find.

P.S. Sorry for my messy code.

Respondido 10 Oct 12, 13:10

Nice solution if you dont need to support IE7 - Blowsie

Demo aquí: http://jsfiddle.net/korigan/jzm3qu1q/1/


 <div class="wrap">
     <p class="highlight">
        <span class="text">Amet assumenda atque eos excepturi harum ipsa</span>


.wrap {
    width: 150px;
.highlight {
    color: #fff;
    display: inline;
    background: blue;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.2;
.highlight .text {
        padding: 4px;
        box-shadow: 4px 0 0 blue, -4px 0 0 blue;
        background-color: blue;
        box-decoration-break: clone; /* For Firefox */

Respondido 24 Jul 15, 16:07

EDIT: nvm, didn't notice the white line; wouldn't giving & nbsp ; instead of regular spaces help?

give it an inline-block display, be sure to make it display:inline for ie7


h1 { display:inline-block }

ie7 only

h1 { display:inline}

Respondido 27 ago 11, 18:08

Adding non-breaking space(&nbsp) will just disable word wrapping. - Dani

Again, if the content comes from a CMS, users cannot add &nbsp to the text - David

Here is one more trick for that:

poner <H1> in another div and give it border-left, but before it delete padding from <H1> css

<div id="wrap">
    <div class="fix">
       <h1>Specialists in retirement income</h1>


body { background:#ddd; }
#wrap { width:400px; background:white; }

h1 {
    color: #fff;
    background: #41a293;
    display: inline;
    font: 30px/1.4 Arial, sans-serif;

.fix {
    border-left:20px solid #41a293;

Ver esta violín

Respondido 18 Abr '13, 16:04

Tal vez white-space:nowrap; is some solution.

Respondido 27 ago 11, 18:08

Yes, this maintains padding at each end, but the breaks are necessary, as this approach means the <h1> spills outside it's parent DIV: cl.ly/2F2P2Q3I1M0h2V1V2i0T - David

De acuerdo con esta thread on WebmasterWorld, which is 2 year-old BTW, this should happen according to the W3 recommendations.

Prueba esto: http://jsfiddle.net/laheab/6MhDU/

Just give each word its own <p> element and you should still get the desired effect.

Respondido 27 ago 11, 19:08

Problem with that approach is that the content comes from a Wordpress backend, thanks though - David

Ah, right. Even so, I'd like the title to be an <h1>. Not too keen on having each letter of a header wrapped in a <p>. - David

Wrap the whole thing in an <h1>? Not sure if that does the SEO effect though. - Ibrahim AshShohail

Using jQuery to wrap every word inside your h1 into a span will pretty much do the trick. I have no clue how it affects SEO though to be honest.

This is what i'm using when i need to achieve this.

        var headerContent = $(this).text().split(' ');

        for (var i = 1; i < headerContent.length; i++) 
            headerContent[i] = '<span class="subhead">' + headerContent[i] + '</span>';

        $(this).html(headerContent.join(' '));


I think i actually got this from an answer from a similar question here on stackoverflow a while back. I'll post the link to the original author if this is the case. I shall look into it tomorrow, but first i need my nice warm bed ^^

Espero que haya ayudado


Respondido 28 ago 11, 10:08

Well, thanks, this is the solution that works, but at a high cost I'd say, as this is the resulting markup: cl.ly/1s0K112z1S2D283k1f27. This is a serious negative for SEO for an H1. But jeez, this seems to be the only way it will realistically work for authors maintaining the site. - David

This can cause an HTML injection attack if you run this with a user-controlled <h1> on your site. - Kevin Cox

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.