Я держу основную область содержимого веб-страницы небольшой, чтобы навигацию нижнего колонтитула можно было видеть «выше сгиба». Это делается с помощью javascript, устанавливающего основной контент <div> таким образом:
sec.style.height = '265px';
sec.style.overflow = 'hidden';
А затем с помощью javascript вставьте кнопку, чтобы изменить стиль обратно на обычный:
sec.style.height = 'auto';
Проблема в том, что точка отсечения 265 пикселей (определяется размером изображения, которое я не хочу скрывать) не совсем соответствует разрыву между строками текста. Это означает, что на верхушках высоких букв видны маленькие забавные метки. Есть ли способ скрыть текст, который частично отображается в <div style="overflow: hidden;">?
Снимок экрана http://timothy.green.name/Temp/overflow.jpg
Изменить, чтобы добавить: Полный 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();};
}