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

Answer 2

不 - 这真的不可能。但我确实质疑你决定让页脚导航保持在首位。折叠真的不像以前那么重要 - 我不想查阅文章，但有很多研究。此外，您的主要导航不应该在您的页脚中。

Answer 3

为了做到这一点，你需要：

找出一行的高度（以像素为单位）
拥有相同高度的所有线

对于＃1，以像素为单位设置行高可以执行操作（我尚未对其进行测试），但它会影响具有不同DPI设置的显示器中的布局（设置字体大小）在相对单位，不是吗？）。否则，您可以使用两条线渲染虚拟DOM节点，并从其computed style读取其高度。

对于＃2，我不确定。没有图片，下标或上标是一个良好的开端。

无论如何，我很确定这不值得努力。用户并不像开发人员想象的那么聪明，但他们并不像可用性专家所认为的那样愚蠢。

溢出时显示的额外文字：隐藏

3 个答案: