Question

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.

Answer 1

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>

🙂