Texte supplémentaire affiché en cas de dépassement: masqué

Question

Je maintiens la zone de contenu principale de la page Web trop petite pour que la navigation dans le pied de page puisse être visible "au-dessus de la ligne de flottaison". Cela se fait en javascript de définir le contenu principal <div> ainsi:

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

Et puis en utilisant javascript pour insérer un bouton pour changer le style de retour à la normale:

sec.style.height = 'auto'; 

Le problème est que la coupure point de 265px (dicté par la taille d'une image que je ne veux pas cacher) ne correspond pas tout à fait à l'écart entre les lignes de texte. Cela signifie que les sommets des grandes lettres sont représentés comme de petites marques amusantes. Y at-il un moyen de masquer le texte qui est partiellement visible dans un <div style="overflow: hidden;">?

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

Modifier pour ajouter: javascript complet

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

Pour ce faire, vous devez:

1. Découvrez la hauteur en pixels d'une ligne
2. Vérifiez que toutes les lignes de la même hauteur

Pour # 1, la fixation d'un line-height en pixels mai faire l'affaire (je ne l'ai pas testé) mais cela peut affecter votre mise en page dans les moniteurs avec différents réglages DPI (vous définissez la taille des polices en unités relatives, n'est-ce pas?). Sinon, vous pouvez afficher un noeud DOM factice avec deux lignes et lire sa hauteur à partir de computed style.

Pour le numéro 2, je ne suis pas certain. Ne pas avoir d'images, d'indices ou d'exposants est un bon début. Quoi qu'il en soit, je suis à peu près sûr que cela ne vaut pas la peine. Les utilisateurs ne sont pas aussi intelligents que les développeurs le pensent, mais ils ne sont pas aussi stupides que le croient les experts de l'ergonomie.

Answer 2

Non - ce n'est pas vraiment possible. Cependant, je m'interroge sur votre décision de garder la navigation de pied de page au-dessus de la ligne de flottaison. Le pli n'est vraiment pas important comme on le pensait - je n'ai pas envie de chercher les articles, mais il y a beaucoup de recherches là-dessus. Et d'ailleurs, votre navigation principale ne devrait pas être dans votre pied de page.

Answer 3

Vous pouvez appliquer un dégradé semi-transparent au-dessus de la barre "Plus" ", il semble donc que le texte s'efface, ce qui réduit les problèmes de fond.

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