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，文字阴影也被裁剪，所需的结果是裁剪文字而不是影子。

真实文本已经被截断，但是如果它被截断以覆盖最坏的情况（＆＃39; MMMMMMMMMMMMMMMMM ......＆＃39;），它将被截断太多。

这可以单独用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>

裁剪阴影的多行文字

1 个答案: