有没有办法用 css 改变 div 边框的文本颜色？ 也许很棘手！

Question

我有一个带有文本的嵌套 div。 文本按设计从子 div 溢出到父 div。

<div style="position:absolute;width:300px;background:yellow">
     <div style="position:relative;height:20px;width:150px;left:0;
                                 background:red;overflow:visible;white-space:nowrap">
        this text will overflow into the parent div!
     </div>
</div>

我的问题：有没有办法用 css 更改从父 div 内的子边界开始的文本颜色？ 现在颜色与溢出到父 div 的文本相同。

Answer 1

有点作弊，但这会起作用：

<div style="position:absolute;width:300px;background:yellow">
    <div style="position: absolute; top: 0; color: pink;">
        this text will overflow into the parent div!
    </div> 
    <div style="position:relative;height:20px;width:150px;left:0;
                             background:red;overflow:hidden;white-space:nowrap">
        this text will overflow into the parent div!
    </div>

</div>

证明： http://jsfiddle.net/8m6v2/

Answer 2

尝试用span标签包装它并以这种方式设置样式。

Answer 3

http://jsfiddle.net/JpSEv/

<div style="position:absolute;width:300px;background:yellow;color:red">
     this text will overflow into the parent div!
    <div style="position:absolute;top:0;height:20px;width:150px;left:0;
                                 background:red;overflow:hidden;white-space:nowrap;color:yellow">
        this text will overflow into the parent div!
     </div>
</div>

:)

Answer 4

我不相信这是可能的，因为文本是内部 div 的孩子，内部 div 的颜色将优先。

一种解决方案是将文本拆分为两个元素并手动为每个元素着色，尽管我承认这不是一个好的解决方案。

Answer 5

我能想到的唯一方法是将一个部分透明的div放在不属于孩子的父母部分上。 然而，这也会与父background-color混淆，并且不允许您 select 透明div下方的文本。