jquery - 将溢出自动切换为隐藏，还有滚动条空间

Question

我从切换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'});
    }
});

Answer 1

这样做，删除自动溢出后再次重置宽度，它将正确呈现文本。

$('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);
}

});

Answer 2

似乎你<p>的问题

添加这个：

p{display:inline}

也使 jquery 更容易一些

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

这是一个小提琴：http: //jsfiddle.net/filever10/qYT8c/

Answer 3

工作演示

您不需要重写内容或关心它是否<p>在 div 内部。

您需要做的就是强制浏览器重新绘制元素。简单的方法是按顺序做这三件事

1. 把它藏起来
2. 调用.height()（offsetHeight在香草 js 中）
3. 展示下

jQuery

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

    }else if($('div').css('overflow') == 'auto'){
        $('div').css({'overflow':'hidden'});
        $('div').hide();
        $('div').height(); // no need to store this anywhere
        $('div').show();
    }
});