如何防止文本阴影重叠前一行的文本

Question

是否可以阻止text-shadow在同一元素中重叠文字（例如h1）？请看下面一个夸张的示例图片 - 在我的用例中，我希望文本非常亮白色，但是阴影会重叠并导致模糊的灰色区域。

我在这里做了一个简化的测试用例来演示：http://codepen.io/approach/pen/LgaIe

注意：我故意使用小line-height来突出显示此问题

Answer 1

您可以考虑在阴影文本上方放置另一层文字：

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

或节省一点时间并输入：

<强> jQuery Working Example

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

Answer 2

据我所知，你不能。

尝试使用较小的阴影或使文字line-height更大。

Answer 3

使用伪元素。

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

首先，将内容重复到元素的属性中：

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

接下来，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;
    }
}

Answer 4

您可以尝试这样的事情：

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

您可以拥有无​​限数量的文字阴影。因此，首先放一个白色的，它可能有助于清除灰色/黑色。调整像素等，让它按照你想要的方式工作。

Answer 5

我认为你必须让line-height更大，比如line-height: 1.3em;