Question

I have the following HTML:

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

I want the text to overflow to right side into parent div but it wraps to the next line in the child div. How can this be done?

Answer 1

Text, and in-line elements, will normally wrap within the width constraints on their parent element as defined in the width CSS attribute/declaration.

To enforce single-line overflow you can either use a string with no white-space, hyphens, or other breaking characters (basically any non-alphanumeric character). Or you can use the:

white-space: nowrap;

declaration, which forces the text/in-line content into a single line. Though this precludes any wrapping, which may become problematic in itself.

Slightly tortured JS Fiddle demo.