一千萬個為什麽

搜索

溢出時顯示的額外文字:隱藏

I'm keeping the main content area of the webpage small, so that footer navigation can be seen "above the fold". This is done by JavaScript setting the main content <div> thus:

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

And then using JavaScript to insert a button to change the style back to normal:

sec.style.height = 'auto';

The problem is that the cut-off point of 265px (dictated by the size of an image which I don't want to hide) doesn't quite match the gap between lines of text. This means that there the tops of tall letters show as funny little marks. Is there any way to hide text which is partially showing in a <div style="overflow: hidden;">?

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

Edit to add: Full 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();};
}

最佳答案

您可以在“更多»”欄上方應用半透明漸變,因此看起來文字漸漸消失,使剪裁的底部不再成為問題。

示例http://img687.imageshack.us/img687/7564/sitametsit.png</一>

轉載註明原文: 溢出時顯示的額外文字:隱藏