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

Question

在我看来，我为字符串中的每个字母设置了单独的文本阴影样式。

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

我怎样才能避免这种情况？现在，字母的 html 看起来像这样:

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

阴影由 jQuery 函数删除。 overflow hidden 严重切割阴影。

我的 CSS <p>

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

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

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>