Jquery 调整DIV大小以仅显示完整的文本行

说明 我有一个固定高度的div和另一个文本div。我需要文本的div与另一个div的高度相同

我能做什么

我可以设置文本div和overflow hidden的高度

问题

在某些情况下，它会将最后一行减半。它不应该显示半行

示例代码

.short, .long {
    float: left;
    width: 300px;
}

.short {
    background: #eee;
    height: 210px;
}
.long {
    background: #ddd;
    overflow: hidden;
}
h3 {
    font-size: 18px;
    line-height: 1em;
}

jQuery(document).ready(function($) {
    var height = $('.short').height();
    $('.long').height(height);
});​

HTML代码（如果JSFIDLE不起作用）

JS代码

.short, .long {
    float: left;
    width: 300px;
}

.short {
    background: #eee;
    height: 210px;
}
.long {
    background: #ddd;
    overflow: hidden;
}
h3 {
    font-size: 18px;
    line-height: 1em;
}

jQuery(document).ready(function($) {
    var height = $('.short').height();
    $('.long').height(height);
});​

问题

• 如果最后一行被切成两半，我如何隐藏它
• 如果没有。有没有jQuery插件可以解决这个问题
问得好。 在jquery或其他语言中，我不知道有什么东西可以做到这一点。 你能做的是：
• 将高度设为所需的div高度
• 计算高度以下最接近的线高度倍数
• 显示具有此多重高度的文本div
• 添加一个新的空白div以填充间隙，即高度减去最近的倍数
希望这有帮助
我尝试过：
对于新手来说，这是一个快速而肮脏的解决方案。请看一看
示例代码：

jQuery(document).ready(function($) {
var height = $('.short').height();


var x = $('.short').height() % $('.long').css('line-height').replace("px", "");

 $('.long').height(height - x);
 });

---

这是一个很好的问题，一个真正让你思考的问题。我已经提出了一些解决方案，但是您需要控制元素的某些方面（我不确定在.long元素中合并其他元素（如标题等）会是什么样子），但现在开始吧。我不认为有可能获得一个可扩展的、100%准确的解决方案来解决这个问题，但我仍然没有用尽所有的可能性，所以这是我目前最好的解决方案：

$(document).ready(function() {

    var target_height = 65;
    var div_height = parseInt($(".long").height());
    var font_height = parseInt($(".long").css("font-size"));
    var line_height = font_height + 4;

    $(".long").css("line-height", line_height + "px");

    while ((target_height % line_height) !== 0) {
        target_height++;
    }

    $(".long").css("height", target_height + "px");
    $(".short").css("height", target_height + "px");

});​

---

。尝试使用target_height变量，您应该会发现您永远不会得到不完整的文本行。
这是我用来获得两列相等高度的函数，您可以在此处使用它：

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}
$(document).ready(function() {
   equalHeight($(".long"));
   equalHeight($(".short"));
});

---

不要使用jQuery。您可以使用CSS来解决它

---

将两个div

short

，

long

写在

content

div下。从

short

中删除高度。将固定高度设置为

content

。使用

short

div中的CSS属性

行高

和

溢出

来显示剩余的半行。
也许一些省略号插件将是一个好的解决方案？ 例如：

---

它用于在长文本中插入省略号，也可用于剪切半行
如果您不需要，请告诉我