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

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 的cmets）是为每个包含字母的元素赋予独特的样式，并使用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... 但诀窍是，阴影实际上是由 spans 生成的，其中的单个字母绝对位于使用 @987654331 的原始文本后面@。 现在，您可以定位单个阴影，而不会使它们与文本重叠。多亏了 JavaScript，您也不必在 HTML 中输入太多内容，这使其具有可扩展性。