Html 裁剪阴影多行文字

存在带阴影的多行文字，但其高度应裁剪为仅显示其中的3行：

<h1><p>Lorem ipsum dolor sit amet consectetuer</p></h1>
<style>
h1 {
  width: 100px;
  line-height: 1em;
  max-height: 4em;
  overflow: hidden;
}

h1 p {
  text-shadow: 0 0 20px #000;
}
</style>

Lorem ipsum door sit amet concertetuer

h1{
宽度：100px；
线高：1米；
最大高度：4em；
溢出：隐藏；
}
H1P{
文本阴影：0 0 20px#000；
}

可以看到，文本阴影也被裁剪，期望的结果是裁剪文本而不是其阴影

真实文本已被截断，但如果它将被截断以覆盖最坏情况（'mmmmmmmmmmmm…'），它将被截断太多

---

这个问题单靠CSS就能解决吗？这里有哪些选项？

在

h1

上加一个左填充将解决此问题

h1{
宽度：100px；
线高：1米；
字体大小：200%；
最大高度：4em；
溢出：隐藏；
左侧填充：10px；
}
H1P{
文本阴影：0 0 20px#000；
}

---

Lorem ipsum dolor sit amet Concertetuer

所以我想，为了保持文本在同一位置，我们应该使用负边距加上正填充？@estus如果您需要将此元素的垂直对齐与之前和后续内容相匹配，可以。用这些信息更新了我的答案。