在 Html Div 中，溢出隐藏对我不起作用答案

【问题标题】：Overflow Hidden is not working for me in Html Div在 Html Div 中，溢出隐藏对我不起作用
【发布时间】：2012-12-30 19:59:36
【问题描述】：

我正在使用以下html，请参阅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>

但我的文本溢出没有隐藏。当我使用小文本而不是 '

ABC DEF GHI JKl MNO dsa dsa sddsa d s

' 那么一切都很好。

【问题讨论】：

overflow 没有做你期望它做的事情。寻找word-wrap、white- space等
这是jsfiddle.net/H3nXk/2 你想要做什么？我不是 100% 确定。

标签： html css

【解决方案1】：

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

小提琴：http://jsfiddle.net/H3nXk/1/

或者如果你关心高度，你需要明确指定`height`。

【讨论】：

你知道如何让它响应吗？
是的，我们可以让它响应。 @user960567 你想做什么？
响应式意味着响应式网页设计。
老兄，根据屏幕的可用性，重新排列......是的，我知道......你想做什么？
目前在移动设备、平板电脑和台式机上的表现都不错。

【解决方案2】：

您需要指定一个高度，以便容器知道溢出开始的位置。

【讨论】：

给white-space: nowrap：

小提琴：http://jsfiddle.net/H3nXk/1/

或者如果你关心高度，你需要明确指定height。

给`white-space: nowrap`：

或者如果你关心高度，你需要明确指定`height`。