Placing a multiline text on an image with a white background resembling tape requires small padding on each side of the text. One way to accomplish this is by using 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>
Unfortunately, Firefox produces different results compared to Chrome when displaying the text. While this doesn't necessarily mean Firefox's behavior is incorrect, you may wonder how to achieve the same result in Firefox as you see in Chrome.