4

描述 我有一个固定高度的 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插件来解决它？
4

6 回答 6

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);
 });
于 2012-08-13T11:37:07.053 回答
0

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

在 div 下short写下两个div。从 中删除高度。将固定高度设置为。使用 CSS 属性并在div 中显示剩余的半行。longcontentshortcontentline-heightoverflowshort

于 2012-09-07T07:23:43.723 回答
0

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

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

希望这可以帮助

于 2012-08-13T10:07:37.600 回答
0

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

于 2012-12-01T15:34:25.310 回答
0

这是我用来获得两列高度相等的函数，你可以在这里使用它：

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"));
});
于 2012-09-03T06:34:17.970 回答
0

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

});​

这是 jsFiddle 示例。尝试使用target_height变量，你应该看到你永远不会得到不完整的文本行。

于 2012-08-13T12:52:51.903 回答