html - 裁剪带阴影的多行文本

Question

有阴影多行文本，但它的高度应该被裁剪以仅显示它的 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>

可以看出here , 文本阴影也被裁剪，期望的结果是裁剪文本而不是它的阴影。

真实文本已经被截断，但如果它被截断以涵盖最坏的情况('MMMMMMMMMMMMMMMMMM ...')，它将被截断太多。

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

Answer 1

h1 上的左填充将解决这个问题

h1 {
  width: 100px;
  line-height: 1em;
  font-size: 200%;
  max-height: 4em;
  overflow: hidden;
  padding-left: 10px;
}

h1 p {
  text-shadow: 0 0 20px #000;
}

<h1><p>Lorem ipsum dolor sit amet consectetuer</p></h1>

---

如果需要将此元素的垂直对齐方式与之前和之后的内容相匹配，请添加负边距以补偿填充

h1 {
  width: 100px;
  line-height: 1em;
  font-size: 200%;
  max-height: 4em;
  overflow: hidden;
  padding-left: 10px;
  margin-left: -10px;
}

h1 p {
  text-shadow: 0 0 20px #000;
}

<h1><p>Lorem ipsum dolor sit amet consectetuer</p></h1>