CODEWITHSUNDEEP
csspaddingline-breaks
Falk
Falk

Reputation: 633

CSS padding automatic linebreak

I've following html:

<div class="container">
  <div class="header">
    <h1>
        a very long long long, really very very long headline ...
    </h1>
  </div>
</div>

and following css:

.container{
  width:200px;
}

.header h1{
  background-color: #e0e0e0;
  display: inline;
  padding: 2px 8px;
  color: black;
  font-size: 16px;
  font-weight: normal;
  line-height: 30px;
}

The problem is, that the browser adds a linebreak because of the long header and small width of the wrapping container. Thats fine. But the padding-left will not be added to the broken second and further lines. I can do this with an negative text-indent and positive padding-left to .header. but the background-color will not be moved to left so it seems as would be there still a zero padding.

How can I change this? Any trick available?

Great greetings, Falk

Upvotes: 10

Views: 18872

Answers (2)

tdtm
tdtm

Reputation: 336

Along with your existing display-inline:

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

Note that it is currently not supported by IE/Edge and considered experimental - but it works on other browsers. Might be an option!

This is a fairly new CSS3 tag that might not have been available at the time of the other answers.

Upvotes: 11

Olly Hodgson
Olly Hodgson

Reputation: 15785

Try changing display: inline; to display: inline-block;.

As I understand it, left and right padding on inline elements will be applied to the beginning and end of the element, regardless of whether there's any line break in between. On a block (or inline-block) element, the padding is applied to the left and right of the entire element.

See https://developer.mozilla.org/en-US/docs/Web/CSS/display for a lot more information!

Upvotes: 13

Related Questions