Line height with gasket

Question

Roko C. Buljan solution does not work in ie

I want to get this design (assuming the background is a unique color with transparent):

I can do this with a property box-decoration-break.

Unfortunately, the property is box-decoration-breaknot supported in IE.

I saw something similar to my design, but I can’t set the line height without ruining the design.

In addition, when I change the font size, the project is destroyed.

https://css-tricks.com/multi-line-padded-text/

This is my jsfiddle: https://jsfiddle.net/9472J/37/

Any help appreciated!

Answer 1

div{width:130px; margin-left:20px}

span.padded{
  font:       18px/32px sans-serif;            /* Font size and line-height spacing */
  box-shadow: 8px 0 0 0 #555, -8px 0 0 0 #555; /* 8px horiz. "padding" */
  padding:    4px 0;                           /* 4px vertical padding */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  color:      #fff;
  background: #555;
/*display:    inline; /* Uncomment if you use block-level element */
}

@-moz-document url-prefix() {
    span.padded{         /* 0.5px spread fixes blurry box shadow in FF */
        box-shadow: 8px 0 0 0.5px #555, -8px 0 0 0.5px #555; 
    }
}

<div>
  <span class="padded">Lorem ipsum this is some padded text with background</span>
</div>

Run code

FF half-pixel precision accurate shadow font printing

Firefox , , box-shadow.
0px spread-radius :

, - () ( -moz-only!):

0.5px spread-radius :

using 0.5px Webkit, Mozilla

@-moz-document url-prefix() {
    span.padded{
        box-shadow: 8px 0 0 0.5px #555, -8px 0 0 0.5px #555;
    }
}

IE, box-shadow

( ) IE11 Edge ( Blur )

https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

Answer 2

, , CSS, .

:

section {
  max-width:400px;
  padding:50px;
  margin:0 auto;
  background: url('http://lorempixel.com/400/800');
  background-size:cover;
  height:100vh;
}

section > h1 {
  display:inline;
  background:rgba(0,0,0,.7);
  box-shadow: 10px 0 0 rgba(0,0,0,.7), -10px 0 0 rgba(0,0,0,.7);
  color:#fff;
  padding:4px 0;
  line-height:200%;
  font-family: sans-serif;
  font-weight:100;
}

<section>
  <h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolore, temporibus consequatur.
  </h1>  
</section>

:

• , rgba rgb , . ​​ 70% (.7 rgba), .

Answer 3

box-shadow do the trick:

HTML:

<section>
  <span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolore, temporibus consequatur.
  </span>  
</section>

CSS

section {
  max-width:400px;
  padding:50px;
  margin:0 auto;
  background: url('http://lorempixel.com/400/800');
  background-size:cover;
  height:100vh;
}

span {
  font-family: sans-serif;
  font-size: 2em;
  font-weight: 100;
  line-height: 1.8;
  padding: 3px 0 6px 0;
  color: rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, .6);
  box-shadow: 10px 0 0 rgba(0, 0, 0, .6), -10px 0 0 rgba(0, 0, 0, .6);
  box-decoration-break: clone;
}

UPDATE:

Now it works in Firefox. Since the default value for FF is equal box-decoration-break: split;, you must set box-decoration-break: clone;.