如何避免文本阴影溢出其他字母？

Question

在我看来，对于字符串中的每个字母，我都有单独的文本阴影样式。

但是文本阴影会在其他字母上溢出。

如何避免这种情况？现在，用于字母的html看起来像这样：

<p class="mainTxtWrapper">P</p>
<p class="mainTxtWrapper">r</p>
<p class="mainTxtWrapper">z</p>
<p class="mainTxtWrapper">e</p>

通过jQuery函数删除阴影。隐藏溢出会严重遮盖阴影。

<p>的我的CSS

p {
    width: auto;
    margin: 0;
    position: relative;
    float: left;
}

注意： 阴影是动态生成的，角度取决于光标位置，因此它可能会向右移动。

Answer 1

想法是使用flexbox遵循视觉顺序，但是您将在代码中反转文本：

.container {
  padding:5px 20px;
  background: pink;
  display:inline-flex;
  flex-direction:row-reverse;
  font-size:50px;
  font-weight:bold;
  color:#fff;
}
.mainTxtWrapper {
 text-shadow:-10px 0 10px blue;
 margin:0;
}

<div class="container">
  <p class="mainTxtWrapper">e</p>
  <p class="mainTxtWrapper">z</p>
  <p class="mainTxtWrapper">r</p>
  <p class="mainTxtWrapper">p</p>
</div>

<div class="container" style="flex-direction:row;">
  <p class="mainTxtWrapper">e</p>
  <p class="mainTxtWrapper">z</p>
  <p class="mainTxtWrapper">r</p>
  <p class="mainTxtWrapper">p</p>
</div>

更新

如果阴影可以从右移到左，则可以尝试以下操作：

.container {
  padding:5px 20px;
  background: pink;
  font-size:50px;
  font-weight:bold;
  color:transparent;
  position:relative;
}
.container:before {
 content:attr(data-text);
 position:absolute;
 z-index:2;
 color:#fff;
}
.mainTxtWrapper {
 text-shadow:-10px 0 10px blue;
 margin:0;
 animation:change 2s linear infinite alternate;
}
@keyframes change {
 to{text-shadow:10px 0 10px blue;}
}

<div class="container" data-text="prze">
  <span class="mainTxtWrapper">p</span><span class="mainTxtWrapper">r</span><span class="mainTxtWrapper">z</span><span class="mainTxtWrapper">e</span>
</div>

Answer 2

问题在于，每个字母都用自己的<p>包裹起来，因此字母及其阴影相互叠放。

最初的务实态度

一种可能的解决方案（在@wdm和@Baruch的注释之后）是为包含字母的每个元素赋予唯一的样式，然后使用z-index对它们进行重新排序。就像您的示例一样，这还允许每个字母带有不同的阴影：

.letter {
  position: relative;
  font-size:60px;
  margin-left: -0.5rem;
}

.first {
  z-index: 4;
  text-shadow:  -12px 5px #33f;
}

.second {
  z-index: 3;
  text-shadow:  -5px 15px #33f;
}

.third {
  z-index: 2;
  text-shadow:  -25px -5px #33f;
}

.fourth {
  z-index: 1;
  text-shadow:  -25px 5px #33f;
}

<span class="first letter">P</span>
<span class="second letter">r</span>
<span class="third letter">z</span>
<span class="fourth letter">e</span>

但是，正如@Temani Afif正确指出的那样，这实际上不是可扩展的，并且正如OP所指出的那样，由于它现在与右侧的文本重叠，因此并不能真正解决问题。

JavaScript方法

const text = document.querySelector(".text");

const shadowContainer = document.createElement("div");
shadowContainer.classList.add("shadow-container");

text.appendChild(shadowContainer);

for(letter of text.textContent) {
  const span = document.createElement("span");
  span.textContent = letter;
  span.classList.add("shadow");
  shadowContainer.appendChild(span);
}

.text {
  font-size: 50px;
  position: relative;
}

.shadow-container {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.shadow {
  text-shadow: 10px 10px 4px #66f;
}

<p class="text">Some long string of text<p>

这就像我们使用常规的text-shadow ...一样，但是窍门在于，阴影实际上是由span生成的，其中的单个字母绝对位于原始字母的后面使用z-index: -1的文本。 现在，您可以将单个阴影作为目标，而它们不会与文本重叠。多亏了JavaScript，您也不必在HTML中输入太多内容，即可扩展。