CODEWITHSUNDEEP
cssoverflow
Jamie Shepherd
Jamie Shepherd

Reputation: 123

Box decoration break overflow

Having a problem with box-decoration-break and overflowing. Here is a fiddle to illustrate my problem: https://jsfiddle.net/n56226na/3/

span {
  display: inline;
  padding: 7px 20px;
  background: #000;
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Basically, I need the text to be boxed, and with padding, according to the design. The problem is on browser resize, the boxes always overflow to the right (and off the page), while the left hand side is padded nicely, due to centre alignment. Here's an image to illustrate my problem:

enter image description here

In an ideal world, the span would be centre aligned, with a black box white text, but wouldn't overflow it's parent div. Not sure if this is even possible. Appreciate any ideas.

Upvotes: 2

Views: 3648

Answers (2)

Carson
Carson

Reputation: 4651

Add a right margin to the parent the same width as the text's padding (20px in your case). That way it will trigger a line break a little sooner, keeping your text from ever seemingly overflowing.

Upvotes: 0

Luca Detomi
Luca Detomi

Reputation: 5716

I asked a similar question and after some researches and taking inspiration from others users' suggestions, I found possible solution.

First of all, in this page you can find some possible solutions using many different methods.

The best that "actually" (browser support varied during time) is to combine the cited "Fabien Doiron's box-shadow Method" with a little modification to address only specific behaviour of Firefox 32+.

Your updated jsFiddle has the following specific rule:

span {
    display: inline;
    padding: 7px 0;
    background: #000;
    color: #fff;
    font-size: 18px;
    line-height: 40px;
    box-decoration-break: clone;

    box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}

I added a multiple box-shadow to mimic lateral padding (resetting your original padding declaration).

Anyway, is necessary to add box-decoration-break: clone; to override specific Firefox 32+ behaviour that has box-decoration-break: split; as default.

Please, note that I left only box-decoration-break: clone; because is necessary only for FireFox.

Instead, you (actually) MUST remove analogue specifix Chrome variant, -webkit-box-decoration-break: clone; because it's the responsible of your unwanted horizontal overflow on window resize.

So, due to fact that Chrome needs vendor prefix for this property, declaring it only with standard syntax is a workaround to make it running correctly even in it and also in IE9+

Upvotes: 2

Related Questions