我们可以更改溢出文本的颜色吗？

Question

如果我有一个divwith overflow: visible;，我可以让溢出文本的颜色与里面的文本颜色不同div吗？

像这样（黑框是 div）：

<div style="overflow: visible; max-width: 200px;">
    Text will for sure overflow
</div>

Answer 1

也许在实际 div 尺寸上放置一个伪元素，并使用mix-blend-mode它来将红色应用于整个文本，再次变暗：

div {
  position: relative;
  overflow: visible;
  max-width: 100px;
  white-space: nowrap;
  border: 1px solid black;
  color: #f00;
}
div::after {
  content: "";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: #fff;
  mix-blend-mode: color;
}

<div>Text will for sure overflow</div>

不确定这是否会与整个页面背景的任何其他要求相冲突，但您必须在需要的任何特定场景中对其进行测试。

而不是mix-blend-mode，应用某种filter可能会产生类似的结果。