Overflow Hidden не работает для меня в Html Div

Я использую следующий 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

' тогда все хорошо.


html css
person user960567    schedule 30.12.2012    source источник
comment
overflow не делает того, что вы от него ожидаете. Ищите word-wrap, white- space и т. д.   -  person Smamatti    schedule 30.12.2012
comment
Это jsfiddle.net/H3nXk/2, что вы хотите сделать? Я не уверен на 100%.   -  person Peter Rasmussen    schedule 30.12.2012

Ответы (2)


arrow_upward
4
arrow_downward

Дайте 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.

person Praveen Kumar Purushothaman    schedule 30.12.2012
comment
Вы знаете, как сделать это отзывчивым? - person user960567; 30.12.2012
comment
Да, мы можем сделать его отзывчивым. Что ты хочешь сделать @user960567? - person Praveen Kumar Purushothaman; 30.12.2012
comment
Отзывчивый означает Отзывчивый веб-дизайн. - person user960567; 30.12.2012
comment
Чувак, в соответствии с наличием экрана, перестановка... Да, я знаю.. ЧТО ТЫ хочешь сделать? - person Praveen Kumar Purushothaman; 30.12.2012
comment
Нынешние не одинаково хорошо выглядят на мобильных устройствах, планшетах и ​​компьютерах. - person user960567; 30.12.2012

arrow_upward
1
arrow_downward

Вам нужно указать высоту, чтобы контейнер знал, где начинается переполнение.

person scoota269    schedule 30.12.2012