CODEWITHSUNDEEP
htmlcss
Imran Qadir Baksh - Baloch
Imran Qadir Baksh - Baloch

Reputation: 33944

Overflow Hidden is not working for me in Html Div

I am using the following html, See this jsfiddle 

        <div style="float: left;">
            <div style="padding-left: 3px; padding-top: 3px;">
                <div style="float: left;">
                    Title: 
                </div>
                <div style="float: left; padding-left: 12px">
                    ABC
                </div>
                <div style="clear: both"></div>
            </div>
            <div style="padding-left: 3px; padding-top: 3px;">
                <div style="float: left;">
                    Lyrics: 
                </div>
                <div style="float: left; padding-left: 3px">
                    <div style="overflow: hidden; width: 180px">
                        ABC DEF GHI JKl MNO dsa  dsa sddsa d s
                    </div>
                    <div style="overflow: hidden; width: 180px">
                        ABC DEF GHI JKl MNO MNO dsa  dsa sddsa d s
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>

        <div style="float: right; border-left: 1px solid black;">

            <img src="http://cdn1.iconfinder.com/data/icons/snowish/72x72/actions/gtk-media-play-ltr.png">
        </div>
    </div>

But my text overflow is not hidden. When I use small text instead of '

ABC DEF GHI JKl MNO dsa dsa sddsa d s

' then everything is fine.

Upvotes: 0

Views: 114

Answers (2)

scottlimmer
scottlimmer

Reputation: 2268

You need to specify a height in order for the container to know where the overflow starts.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Give white-space: nowrap:

    <div style="float: left;">
        <div style="padding-left: 3px; padding-top: 3px;">
            <div style="float: left;">
                Title: 
            </div>
            <div style="float: left; padding-left: 12px">
                ABC
            </div>
            <div style="clear: both"></div>
        </div>
        <div style="padding-left: 3px; padding-top: 3px;">
            <div style="float: left;">
                Lyrics: 
            </div>
            <div style="float: left; padding-left: 3px">
                <div style="overflow: hidden; white-space: nowrap; width: 180px; ">
                    ABC DEF GHI JKl MNO dsa  dsa sddsa d s
                </div>
                <div style="overflow: hidden; white-space: nowrap; width: 180px">
                    ABC DEF GHI JKl MNO MNO dsa  dsa sddsa d s
                </div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div style="float: right; border-left: 1px solid black;">

        <img src="http://cdn1.iconfinder.com/data/icons/snowish/72x72/actions/gtk-media-play-ltr.png">
    </div>
</div>

Fiddle: http://jsfiddle.net/H3nXk/1/

Or if you are concerned about height, you need to specify height explicitly.

Upvotes: 4

Related Questions