How to prevent text-shadow from overlapping text on previous line

Question

Is it possible to prevent text-shadow from overlapping text within the same element (e.g. a h1)? Please see an exaggerated example image below – in my use case I would like the text to be very bright white, but instead the shadow is overlapping it and causing murky grey areas.

I made a reduced test case here to demonstrate: http://codepen.io/approach/pen/LgaIe

Note : I deliberately used a small line-height to highlight this issue

Answer 1

You could consider putting another layer of text above the shadowed text:

Basic Working Example

<div class="cover">
     <h1><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eveniet eos deleniti provident ab nam laborum at voluptatem est iste ratione quis error perspiciatis debitis.</a></h1>

</div>

.cover{
 position:absolute; 
 top:0;
}
.cover h1 a{
 color: white;
}

Or to save a little time and typing:

jQuery Working Example

$(function () {
    $('.wrapper').children().clone().css({
        position: 'absolute'
    }).prependTo('body');
});