TRiG TRiG - 7 days ago 6
CSS Question

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

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

Answer

In order to do that you need to:

  1. Find out the height in pixels of a line
  2. 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.

Comments