Question

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

我能做什么

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

问题

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

示例代码

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

Answer 2

好问题。在jquery或其他方面，我不知道有什么事情可以做到这一点。你能做的是：

让高度为您想要的div高度
计算最接近高度的行高
以多个高度显示文本div
添加一个新的空白div以填充间隙，即高度减去最接近的多个

希望这有帮助

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解决它。

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

Answer 6

也许一些省略号插件会是一个很好的解决方案？例如：http://pvdspek.github.com/jquery.autoellipsis/ 这是为长文本插入省略号，但也适用于剪切半行

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

6 个答案: