cross-compatibility - box-shadow with multiple line span

Question

I have an element that uses box-shadow to give it a background that follows the length of an inline element and, more importantly, stays consistent when you shrink the window and the text spills into a new line.

http://jsfiddle.net/ric0c/dgersydv/

  -moz-box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  -webkit-box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  background: #7E8573;
  color: #fff;
  line-height: 30px;
  padding: 5px 10px 5px 0px;
  margin: 18px 0;
  font-size: 20px;
  display: inline;
  white-space: pre-line;
  position: relative;
  left: 10px;

Now this works correctly on Chrome and Safari but I'm getting inconsistencies on Firefox. If use white-space: pre-line; I lose the "padding" on the left and right sides. If use white-space: pre-wrap; the text no longer stays in line with the line above when it spills over.

Any thoughts on how to get this consistent on all browsers?

score 1 · Answer 1 · answered Jun 16 '15 at 17:55

Not sure why you want white-space. It causes problems because you have line breaks inside the h2. Just remove it, or remove the line breaks.

And then, the difference between Firefox and Chrome is that Chrome behaves like if you used box-decoration-break: clone, but the initial value should be slice.

So just add

h2 {
  box-decoration-break: clone;
}

h2 {
  -moz-box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  -webkit-box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  background: #7E8573;
  color: #fff;
  line-height: 30px;
  padding: 5px 10px 5px 0px;
  margin: 18px 0;
  font-size: 20px;
  display: inline;
  position: relative;
  left: 10px;
  box-decoration-break: clone;
}

<h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus.
</h2>

cross-compatibility - box-shadow with multiple line span

1 Answers1