代码之家 › 专栏 › 技术社区 › TRiG

溢出时显示的额外文本:隐藏

overflow css javascript

TRiG · 技术社区 · 15 年前

我保持网页的主要内容区域较小,这样页脚导航就可以看到“折叠上方”。这是通过javascript设置主要内容来完成的。 <div> 因此:

sec.style.height = '265px';
sec.style.overflow = 'hidden';

然后使用javascript插入一个按钮,将样式改回正常:

sec.style.height = 'auto';

问题是,265px的截止点(由我不想隐藏的图像大小决定)与文本行之间的间距不太匹配。这就意味着高的字母顶部显示出有趣的小标记。是否有任何方法隐藏部分显示在 <div style="overflow: hidden;"> ?

Screenshot http://timothy.green.name/Temp/overflow.jpg

编辑添加:完整的javascript

var overflow = {
    hide: function() {
        var sec = app.get('content_section');
        sec.style.height = '263px';
        sec.style.overflow = 'hidden';
        overflow.toggle(false);
    },
    toggle: function(value) {
        var cnt = app.get('toggle_control');
        if (value) {
            var func = 'hide';
            cnt.innerHTML = 'Close Â« ';
        } else {
            var func = 'show';
            cnt.innerHTML = 'More Â» ';
        }
        cnt.onclick = function() {eval('overflow.' + func + '();'); return false;};
        cnt.style.cursor = 'pointer';
        cnt.style.fontWeight = 'normal';
        cnt.style.margin = '0 0 0 857px';
    },
    show: function() {
        var sec = app.get('content_section');
        sec.style.height = 'auto';
        overflow.toggle(true);
    }
}

if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', overflow.hide, false);
} else {
    window.onload = function() {return overflow.hide();};
}