如果换行符上有一个孤立的单词，jQuery 不会计算正确的文本高度答案

【问题标题】：jQuery not calculating correct height of text if there is an orphaned word on line break如果换行符上有一个孤立的单词，jQuery 不会计算正确的文本高度
【发布时间】：2014-09-27 21:21:43
【问题描述】：

如果您查看我正在开发的此页面：http://dev.aaronpitts.ch/test/，您将看到三个绿色按钮，上面写着“了解更多”。我试图让它们始终使用以下 jQuery 对齐：

var maxHeight = 0;

$(".same-height-inner").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".same-height-inner").height(maxHeight);

.same-height-inner 中的 p 块的底部边距为 20px，但这不包含在 .same-height-inner 的高度中。此外，如果您在 1024 x 768 的屏幕尺寸上查看此内容，您会看到左侧列的文本在高度上进一步计算错误，因为它不包括换行的孤立词。我试过使用

outerHeight(true)

但这没什么区别。我怎样才能实现上述目标？

【问题讨论】：

在谷歌浏览器中，它们至少在第一页上对齐......或者当您点击了解更多时，您想在下一页上实现这一点吗？
我认为你不应该设置height，而是设置元素的outerHeight，并使用outerHeight设置它。如果一切都失败了，请查看brm.io/jquery-match-height
当上面的文本总是两行时，它们在大屏幕上的第一页上对齐，但是如果您在 1024 x 768 屏幕上检查，例如，如果有一个孤立的词导致第三行打破它不包括高度中的最后一行
我用outerheight试过了，没什么区别

标签： javascript jquery css responsive-design

【解决方案1】：

这是因为段落元素比封闭的 div 大，因为它是块元素内的内联元素，只需将 p 包含在选择器中

$(".same-height-inner p").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".same-height-inner").height(maxHeight);

您也可以将封闭的 div 内联，这也可以解决问题，但可能会在网站的其他地方产生意想不到的后果。

.same-height-inner {
    display: inline-block;
}

【讨论】：

【解决方案2】：

你可以简单地将 .find('p') 添加到你的 jQuery 代码中，所以它会是：

var maxHeight = 0;
$(".same-height-inner").find('p').each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".same-height-inner").height(maxHeight);

同样的方式，如果你使用outerHeight(true)，例如，我使用这个代码：

function calculateHeight($el) {
   var height = 0;
   $el.children().find('a').each(function() {
      height = height + $(this).outerHeight(true);
    });
   $el.data('oHeight', height);
}

祝你好运。

【讨论】：