調整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/ 這是用於插入長文本省略號，同時還可以使一個小提琴來顯示它的工作適用於切割半線