Jak zapobiec nakładaniu się cienia tekstowego na nakładający się tekst w poprzedniej linii?

Question

Czy można zapobiec nakładaniu się tekstu w tym samym elemencie (na przykład na h1)? Proszę zobaczyć przesadny przykładowy obraz poniżej - w moim przypadku użycia chciałbym, aby tekst był bardzo jasny biały, ale zamiast tego cień zachodzi na niego i powoduje mętne szare obszary.

zrobiłem obniżoną przypadek testowy, żeby wykazać, że: http://codepen.io/approach/pen/LgaIe

Uwaga: Celowo użył małego line-height aby wyróżnić ten problem

Answer 1

Można spróbować czegoś takiego:

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

Możesz mieć nieograniczoną liczbę cieni tekstu. dlatego umieszczając najpierw biały, może pomóc usunąć szary/czarny. Dostosuj piksele i takie, aby uzyskać działanie zgodne z oczekiwaniami.

Answer 2

O ile wiem, nie można.

Spróbuj użyć mniejszego cienia lub zmień tekst na większy o line-height.

Answer 3

myślę, trzeba zrobić swoje większe line-height, powiedzmy line-height: 1.3em;

Answer 4

można rozważyć wprowadzenie kolejną warstwę tekstu powyżej zacienionej tekście:

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

lub zapisać trochę czasu i pisania:

jQuery Working Example

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

Answer 5

użytkowania element pseudo.

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

pierwsze, uzyskać zawartość powtarzającego się atrybutu na elemencie:

<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> 

Następnie 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; 
    } 
}