1

overflow:hidden;からに切り替えるときに問題が発生しoverflow:auto;、非表示に戻すと、テキストがスクロール バーのスペースを占有しません。私のフィドルを見てください

これは私のHTMLです

<div>
    <p>Lorem ipsum dolor .. lots of text here.</p>
</div>
<button id="switch">Switch div overflow</button>

CSS

div { height:300px; width:200px; overflow:hidden; background:#CCC;}

jQuery

$('button').click(function(){
    if($('div').css('overflow') == 'hidden'){
        $('div').css({'overflow':'auto'});
    }else if($('div').css('overflow') == 'auto'){
        $('div').css({'overflow':'hidden'});
    }
});
4

3 に答える 3

0

これを行い、自動オーバーフローを削除した後に幅を再度リセットすると、テキストが正しくレンダリングされます。

$('button').click(function(){
if($('div').css('overflow') == 'hidden'){
    $('div').css({'overflow':'auto'});
}else if($('div').css('overflow') == 'auto'){
    $('div').css({'overflow':'hidden'});
            var texts = $('div').text();
            $('div').text('');
            $('div').text(texts);
}

});

于 2013-10-31T00:42:41.050 に答える
0

あなた<p>が問題だったようです

これを追加：

p{display:inline}

jqueryも少し簡単にしました

$('button').click(function(){
    $('div').toggleClass('on');
});

ここにフィドルがあります：http://jsfiddle.net/filever10/qYT8c/

于 2013-10-31T00:43:12.397 に答える