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

Question

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

我能做些什么

我可以高度设置为文本的div和溢出隐藏

问题

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

示例代码

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

不错的问题。 我不知道有什么这样做，在jQuery或其他。 你可以做的是：

• 设高度是DIV高度你想
• 计算行高度以下的高度
• 显示在该双高度文字的div
• 添加的最接近的倍数新的空白div来填补缺口，这是高度减去最接近多个

希望这有助于

Answer 2

我已经试过这样：

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); 
}); 

Answer 3

这是一个很大的问题，这些事情真的让你想一个。我已经提出了某种解决方案，但是您需要控制元素的某些方面（我不确定在.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"); 

});​ 

Here's the jsFiddle example 。试着玩target_height变量，你应该看到你永远不会得到不完整的文本行。

Answer 4

这是我用得到两列的高度相等的功能，你可以在这里使用它：

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")); 
}); 

Answer 5

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

写下content div下的两个div short,long。从short移除高度。将固定高度设置为content。使用short div中的CSS属性line-height和overflow显示剩余的半行。

Answer 6

也许一些省略号插件将是一个很好的解决方案？ 例如：http://pvdspek.github.com/jquery.autoellipsis/ 这是用于插入长文本省略号，同时还可以使一个小提琴来显示它的工作适用于切割半线