Is there a way to change text color at border of div with css? Maybe tricky !

I have a 开发者_开发百科nested div with text. Text overflows from child to parent div by design.

<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>

My question : Is there a way to change color of the text starting at the border of the child inside the parent div with css? Right now color is the same as text overflows to the parent div.

Kind of cheating, but this would work:

<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>

Proof: http://jsfiddle.net/8m6v2/

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>

:)

Try wrapping it with a span tag and styling it that way.

I don't believe this is possible, since the text is a child of the inner div, the color of the inner div will take precedence.

A solution is to split the text across two elements and manually coloring each, although I concede that is not a nice solution.

The only way I can think of accomplishing this would be to place a partially transparent div over the part of the parent which is not part of the child. This will however also mess with the background-color of the parent and not allow you to select the text underneath the transparent div.