Extra text shown on overflow: hidden

问题

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();};
}

回答1:

In order to do that you need to:

Find out the height in pixels of a line
Have all lines of the same height

For #1, setting a line-height in pixels may do the trick (I haven't tested it) but it can affect your layout in monitors with different DPI settings (you set font sizes in relative units, don't you?). Otherwise, you can render a dummy DOM node with two lines and read its height from its computed style.

For #2, I'm unsure. Having no pictures, subscripts or superscripts is a good beginning.

Whatever, I'm pretty sure it's not worth the effort. Users are not as smart as developers think but they aren't as dumb as usability experts believe.

回答2:

You could apply a semi-transparent gradient above the "More »" bar, so it looks like the text is fading out, making the cut bottoms less of a problem.

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

回答3:

No - this isn't really possible. I do question your decision to keep the footer navigation above the fold, though. The fold really isn't important as once thought - I don't feel like looking up the articles, but there is plenty of research on that. And besides, your primary navigation shouldn't be in your footer.

来源：https://stackoverflow.com/questions/2646811/extra-text-shown-on-overflow-hidden

标签

javascript

css

overflow