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

【问题标题】：Resize DIV to only show complete lines of text调整 DIV 的大小以仅显示完整的文本行
【发布时间】：2012-08-13 09:58:16
【问题描述】：

说明我有一个固定高度的 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 插件可以解决吗？

【问题讨论】：

标签： jquery css overflow hide truncate

【解决方案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);
 });

【讨论】：

如果这不是您的要求，请告诉我

【解决方案2】：

好问题。我不知道在 jquery 或其他方面有什么这样做的。你可以做的是：

让 height 成为你想要的 div 高度
计算行高低于高度的最接近的倍数
以多重高度显示文本 div
添加一个新的空白div来填补空白，即高度减去最接近的倍数

希望对你有帮助

【讨论】：

【解决方案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 变量，您应该会发现您永远不会得到不完整的文本行。

【讨论】：

【解决方案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"));
});

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

【讨论】：