Question

我正在尝试确定某些内容是否符合其最大高度限制，但line-height会以一种我不理解的方式影响结果。

这是我的代码，用于计算内容是否被部分隐藏：

  var partiallyHidden = content.scrollHeight > content.offsetHeight;

但似乎我必须考虑其他方面，例如line-height，因为根据内容的行高，此代码不起作用。

请在此处查看完整示例：http://plnkr.co/edit/mdI6pGRRWHtS0KXvQOX6?p=preview

line-height和scrollHeight / scrollOffset之间有什么关系？我还有其他方面需要考虑吗？

顺便说一句，我的解决方案必须使用IE9 +。

其他说明：

我在另一个SO问题中找到了content.scrollHeight > content.offsetHeight 公式。
this question接受的答案中提供的代码会产生相同的错误。（el.clientHeight < el.scrollHeight）。我不确定clientHeight vs scrollOffset如何更改结果。

Answer 1

此 Smashing Magazine article 描述字体的基线：

“更糟糕的是，CSS line-height属性没有固有的基线概念，每行文本大致位于元素总高度的中间。”

根据 SO answer ：

“有些字体甚至没有ascenders / descenders的概念。如果使用图标字体，你会怎么做？有些字体对齐下降，使得它们甚至不下降到基线以下。其他字体，如书法无论角色是否具有实际下降器，字体都倾向于低于基线。“

因此，根据这一点，line-height: 12px font-size: 12px字体将在中间位于大致，但是下降（或任何可能下降到基线以下的字符）可能没有考虑到字体的总高度，因此字体可能会扩展到行高以外。这似乎就是这种情况。当我将行高增加到13px或更高时（你用15px表示），这就解决了这个问题。

我还能够通过在控制器的末尾添加两个<br/>标记来修复低线高问题：Line 25<br/>Line 26<br/><br/>，所以它基本上添加了一个空白行，没有任何可隐藏的内容在底部。

高度取决于行高，而不是字体大小： http://jsfiddle.net/4N53p/

我还应该补充一下，我尝试了其他一些字体，但他们遇到了同样的问题。

因此，基于此，您可以假设if（line-height＆lt; == font-size），将隐藏某些内容。所以你可以使用这样的东西（通过改变行高和添加量在你的应用程序中测试）：

if(line-height === font-size) {
    var mustShowButton = content.scrollHeight > content.offsetHeight + 1;
else if(line-height < font-size) {
    var mustShowButton = content.scrollHeight > content.offsetHeight + (font-size - line-height); 
} else {
    var mustShowButton = content.scrollHeight > content.offsetHeight
}

如何确定某些内容是否因max-height而被部分隐藏？

1 个答案: