Дополнительный текст, отображаемый при переполнении: скрытый

Question

Я сохраняю основную область содержимого веб-страницы маленькой, так что навигацию нижнего колонтитула можно увидеть «над сгибом». Это делается с помощью 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

Edit, чтобы добавить: полный код 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 1

Для того, чтобы сделать что вам нужно:

1. Узнайте высоту в пикселях линии
2. Есть все линии одинаковой высоты

Для # 1, установив line-height в пикселях может сделать трюк (я его не тестировал), но это может повлиять на ваш макет в мониторах с различными настройками DPI (вы устанавливаете размеры шрифта в относительных единицах, не так ли?). В противном случае вы можете отобразить фиктивный узел DOM с двумя строками и прочитать его высоту от computed style.

За # 2 я не уверен. Отсутствие изображений, индексов или надписей - хорошее начало.

Как бы то ни было, я уверен, что это не стоит усилий. Пользователи не так умны, как думают разработчики, но они не такие глупые, как считают эксперты по юзабилити.

Answer 2

Нет - это не представляется возможным. Тем не менее, я ставил под сомнение ваше решение сохранить навигацию нижнего колонтитула выше складки. Складки действительно не важны, как когда-то думали - мне не хочется искать статьи, но есть много исследований по этому поводу. И кроме того, ваша основная навигация не должна быть в нижнем колонтитуле.

Answer 3

Вы можете применить полупрозрачный градиент над панелью «Больше», чтобы он выглядел так, будто текст затухает, что делает сокращение менее значительным.

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