4

A multiline text is positioned on an image. The text should appear on a white background like taped. Each line of the text needs a small padding at the left and right side. This can be achieved with a box-shadow for the inline text.

div.slide {
    background-color: black;
    height:200px;
    width:600px;
}
div.show {
    position:absolute;
    top:50px;
    left:50px;
    color:black;
    width:200px;
}
h3 {
    color:black;
    background-color:white;
    display:inline;
    -moz-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    -webkit-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    box-shadow: 5px 0px 0px white, -5px 0px 0px white;
}
<div class="slide">
    <div class="show">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
    </div>
</div>

Unfortunatelly firefox' result is not the same as of chrome. But I couldn't claim that firefox' behaviour isn't correct. But how can I achieve the chrome result for firefox?

pabo
  • 808
  • 7
  • 14
  • Note sure how helpful you may find this, but when I set `line-height:1.5em;`, the padding looked consistent between chrome and Firefox – TheIronDeveloper Apr 21 '15 at 07:19
  • The space between the lines isn't so interesting. It is the padding-left which makes an ugly ledge at the begining of the first line which you can see in Firefox. – pabo Apr 21 '15 at 07:45
  • Point to note: Box shadow doesn't need prefixing... [see here](http://caniuse.com/#feat=css-boxshadow) – jbutler483 Apr 21 '15 at 08:14
  • Right, but adjusting the `line-height` fixed the side padding oddly enough :) – TheIronDeveloper Apr 21 '15 at 08:14

2 Answers2

10

Firefox requires box-decoration-break: clone; just change that and you are good to go :)

div.slide {
    background-color: black;
    height:200px;
    width:600px;
}
div.show {
    position:absolute;
    top:50px;
    left:50px;
    color:black;
    width:200px;
}
h3 {
    box-decoration-break: clone;
    color:black;
    background-color:white;
    display:inline;
    -moz-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    -webkit-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    box-shadow: 5px 0px 0px white, -5px 0px 0px white;
}
<div class="slide">
    <div class="show">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
    </div>
</div>
Iliyan Tatarov
  • 504
  • 4
  • 9
  • The box-decoration-break CSS property specifies how the background, padding, border, border-image, box-shadow, margin and clip of an element is applied when the box for the element is fragmented good demo http://jsbin.com/xojoro/edit?html,css,js,console,output – zloctb Jul 13 '16 at 00:48
0

I hope this is what you were trying to achieve?

div.slide {
    background-color: black;
    height:200px;
    width:600px;
}
div.show {
    position:absolute;
    top:50px;
    left:50px;
    color:black;
    width:200px;
}
h3 {
    color:black;
    display:inline;
    
    text-shadow:
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
}
<div class="slide">
    <div class="show">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
    </div>
</div>
Sujit Agarwal
  • 12,348
  • 11
  • 48
  • 79
  • His description does not describe text-shadow. Hes trying to get the white box padding to not appear "off" like it does on Firefox. If you test his code on Chrome, you will see white padding. Run the same code snippet on FireFox, and the padding does not reach the same line-height. – TheIronDeveloper Apr 21 '15 at 07:21
  • The line height or the space between the lines is not the relevant issue. It is the padding left and right which is added in chrome to each text line but in firefox only at the beginning and at the end of the whole text. – pabo Apr 21 '15 at 07:30