溢出时显示额外的文本：隐藏 [英] Extra text shown on overflow: hidden

问题描述

我保持网页的主要内容区域小，所以页脚导航可以看到折叠。这是通过javascript设置主要内容< div> ：

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';

然后使用javascript插入按钮将样式改回正常：

And then using javascript to insert a button to change the style back to normal:

sec.style.height = 'auto';

问题是截止点为265px（由图像大小决定不想隐藏）不完全匹配文本行之间的间隙。这意味着高大字母的顶部显示为有趣的小标记。有没有办法隐藏部分显示在< div style =overflow：hidden;> ？

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;">?

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

推荐答案

需要：

1. 找出行的高度（以像素为单位）


2. 相同高度

对于＃1，以像素为单位设置行高可以测试它），但它可以影响你的布局在不同的DPI设置的显示器（你设置字体大小的相对单位，不是吗？否则，您可以使用两行显示虚拟DOM节点，并从其计算样式读取其高度， a>。

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.

对于＃2，我不确定。没有图片，下标或上标是一个好的开始。

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.

这篇关于溢出时显示额外的文本：隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！