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

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

  •  0
  • TRiG  · 技术社区  · 14 年前

    我保持网页的主要内容区域较小,这样页脚导航就可以看到“折叠上方”。这是通过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();};
    }
    
    3 回复  |  直到 8 年前
        1
  •  0
  •   Álvaro González    14 年前

    要做到这一点,您需要:

    1. 找出线条的高度(以像素为单位)
    2. 所有线条高度相同

    对于1,以像素为单位设置行高 可以 做这个技巧(我还没有测试过),但它会影响显示器中不同dpi设置的布局(你以相对单位设置字体大小,不是吗?)。否则,可以用两行渲染一个虚拟的DOM节点,并从其 computed style .

    对于2,我不确定。没有图片、下标或上标是一个好的开始。

    不管怎样,我很肯定这不值得你这么做。用户并不像开发人员想象的那么聪明,但也不像可用性专家想象的那么笨。

        2
  •  1
  •   Casey Chu    14 年前

    你可以在“更多”条上应用一个半透明的渐变,这样文本看起来就会淡出,从而减少了切割底部的问题。

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

        3
  •  0
  •   Keith Rousseau    14 年前

    不-这不太可能。不过,我确实怀疑您是否决定让页脚导航保持在折叠上方。折叠真的不像以前想的那么重要-我不想查阅文章,但是有很多关于它的研究。此外,您的主要导航不应该在您的页脚中。