Combination of "box-decoration-break: clone" and "text-align: right" not working properly in Chrome

Question

I have a problem combining box-decoration-break: clone with text-align: right of the parent div, once there is a line break and I set padding.

In Firefox, this works as expected, in Chrome however the first and the last line are indented differently. Does anybody have a solution to this?

.text {
  padding-left: 30px;
  padding-right: 30px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: blue;
}

.container {
  text-align: right;
  width: 80%;
  margin: auto;
}

<div class="container">
  <h1>
    <span class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
  </h1>
</div>

https://jsfiddle.net/okapi123/a24n1xt3/12/

Thanks in advance!

Hi, span is inline element, `display: inline-block` solve your situation? — s0xzwasd, May 24 '20 at 08:45
@s0xzwasd Unfortunately, I need it to be inline, as block elements do not allow the background color to just cover the actual text area. — luro95, May 24 '20 at 10:42
@TemaniAfif I first wanted to check whether there exists a common solution to this problem before reporting a bug — luro95, May 24 '20 at 10:44
Why you don't put the padding to the parent container element ? — Benjamin Barbé, May 24 '20 at 11:00
@BenjaminBarbé I need the padding in the inline text element in order to let the background color to fill the remaining space — luro95, May 24 '20 at 11:29
@luro95 facing the same issue and haven't found a working solution yet. Did you find any? — Franz Koch, Dec 15 '20 at 15:49
For a workaround using box-shadow see [this stackoverflow question/answer](https://stackoverflow.com/questions/33636856/how-to-apply-css-styles-to-text-only) — Franz Koch, Dec 15 '20 at 16:42

Combination of "box-decoration-break: clone" and "text-align: right" not working properly in Chrome

0 Answers0