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

如果我有一个

div

和

溢出：可见

，我可以使溢出文本的颜色与

div中文本的颜色不同吗

类似这样的内容（黑匣子是div）：


文本肯定会溢出

您可以使用两个div彼此重叠，并使用背景色将div隐藏在后面


.wrapper{
位置：相对位置；
}
第一组{
位置：绝对位置；
溢出：隐藏；
宽度：20px；
空白：nowrap；
z指数：1；
边框：0.5px纯黑；
背景：白色；
}
第二组{
位置：绝对位置；
颜色：红色；
垫面：1px；
左：3倍；
}

你好
你好
可能在实际div维度上放置一个伪元素，并使用
混合模式
使其变成应用于整个文本的红色，再次变暗：


div{
位置：相对位置；
溢出：可见；
最大宽度：100px；
空白：nowrap；
边框：1px纯黑；
颜色：#f00；
}
div：：之后{
内容：“；
位置：绝对位置；
顶部：0；左侧：0；右侧：0；底部：0；
背景：#fff；
混合模式：颜色；
}
文本肯定会溢出
您可以通过使用
-webkit background clip:Text
和
线性渐变
来实现这一点。为此，您必须将文本包装在具有背景属性的容器中，并使目标文本透明。定义线性渐变，如下所示，在与文本相同的宽度下为黑色（此处
100px
），其余为红色：

背景图像：线性渐变（向右，黑色100px，黑色1%，红色1%）；

工作示例：


*{
框大小：边框框；
}
div{
背景图像：线性渐变（向右，黑色100px，黑色1%，红色1%）；
-webkit背景剪辑：文本；
}
p{
最大宽度：100px；
边框：1px纯黑；
空白：nowrap；
溢出：可见；
颜色：透明；
}

文本肯定会溢出

背景滤镜也可以做到这一点


.box{
位置：相对位置；
最大宽度：100px；
空白：nowrap；
填充：3倍；
边框：1px纯黑；
颜色：#f00；
}
.box：：之后{
内容：“；
位置：绝对位置；
插图：0；
背景滤镜：灰度（1）；
}
文本肯定会溢出
您可能需要使用javascript或任何其他库可能，
过滤器
属性可以帮助您在实际div维度上放置一个伪元素，并使用
混合模式
将应用于整个文本的红色再次变为黑色？（不确定这是否会与整个页面背景的任何附加要求或其他要求相冲突，不过，您必须在任何需要的特定场景中进行测试。）@CBroe通过使用您的代码并稍加修改，我得到了一个非常接近我想要的结果：。我想你应该把它作为一个答案发布。将
中的
左
：：after
更改为
cacl（100%+1px）
会做得更好。现在你可以安全地使用
插入：0
而不是将上/左/右/下全部设置为0。支持非常好我不知道背景滤镜
-谢谢你的提示。不幸的是，它在firefox和一些移动浏览器中不起作用。在第二个示例中，填充也会使框中的最后一个字母（部分）变为红色…@biberman，您可以通过添加
框大小：边框框我已经试过了-没用…@biberman用一个小小的计算更新了我的代码
<div style="overflow: visible; max-width: 200px;">
    Text will for sure overflow
</div>