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

Question

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

我能做什么

我可以为文本 div 设置高度并 overflow hidden

问题

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

示例代码

http://jsfiddle.net/LCQHb/

HTML 代码(如果 jsfiddle 不起作用)

<div class="long">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis quam sem. Nulla ultricies ultrices nisi, eu aliquam tellus accumsan sed. Praesent sapien mauris, fermentum non aliquam non, congue fermentum massa. Donec diam magna, tristique in luctus dignissim, mattis vitae enim.</p>

<h3>Morbi condimentum</h3>

<p>Fusce egestas aliquam tellus. Fusce dignissim, sapien non euismod adipiscing, odio tortor condimentum mi, at ultrices ligula lectus elementum ante. Pellentesque quis velit at odio venenatis mollis vitae molestie diam. Mauris imperdiet tristique adipiscing. Aliquam ornare tincidunt arcu, nec venenatis nisi mollis in. Proin euismod tempor elit, ut porta mauris euismod vel. Vestibulum congue ullamcorper dolor, a pellentesque nisl interdum non.</p>
<p>Phasellus at mollis tortor. Phasellus eget velit sit amet quam ultricies pretium quis nec augue. Suspendisse vel ante metus. Maecenas venenatis tristique lacus, pulvinar congue eros commodo ut. Donec vitae venenatis magna. Pellentesque posuere orci vitae nisi sagittis rutrum. Donec non mi nec tellus tincidunt malesuada. Nullam ornare ultricies ultrices. Donec mauris augue, pretium eget iaculis eget, tincidunt sit amet libero.</p>
</div>
<div class="short">
</div>

CSS 代码

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

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

JS代码

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

问题

• 如果最后一行被切成两半，我该如何隐藏它？
• 如果没有。有没有 jQuery 插件可以解决？

Answer 1

我试过这个:

http://jsfiddle.net/LCQHb/13/

这是来自新手的快速且最肮脏的解决方案。请看一下。

示例代码:

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


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

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