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');
});

Answer 2

You can try something like this :

h1 { 
   text-shadow: 0 0 2px white, 0 0 10px grey, 0 0 4px black; 
}

you can have unlimited number of text shadows. so by putting a white one first, it may help clear out the grey /black. Adjust the pixels and such, to get it working how you want.

Answer 3

As far as I know, you can't.

Try to use a smaller shadow or make the text line-height larger.

Answer 4

i think you have to make your line-height bigger, say line-height: 1.3em;

Answer 5

Use a pseudo element.

http://codepen.io/andrewtibbetts/pen/OXzvOd

First, get the content repeated into an attribute on the element:

<div class="text-shadow" data-content="This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow.">This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow.</div>

Next, the css:

.text-shadow {
    position: relative;
    text-shadow: 0 -.5em 1em black;
    color: transparent;

    &:after {
        content: attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-shadow: none;
    }
}