javascript - 溢出时显示的额外文本 : hidden

Question

我将网页的主要内容区域保持较小，以便可以在“首屏”看到页脚导航。这是通过 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();};
}

Answer 1

您可以在“更多 »”栏上方应用半透明渐变，这样文本看起来会逐渐淡出，从而减少裁剪底部的问题。

example http://img687.imageshack.us/img687/7564/sitametsit.png