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などでそれを行うものは何も知りません。あなたができることは：

  • 高さを必要なdivの高さにします
  • 高さより下の線の高さの最も近い倍数を計算します
  • この複数の高さでテキストdivを表示します
  • ギャップを埋めるために新しい空白のdivを追加します。これは、高さから最も近い倍数を引いたものです。

お役に立てれば

于 2012-08-13T10:07:37.600 に答える
0

これは、2つの列の高さを等しくするために使用する関数であり、ここで使用できます。

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

たぶん、いくつかの省略記号プラグインが良い解決策になるでしょうか? 例: http://pvdspek.github.com/jquery.autoellipsis/ 長いテキストの省略記号を挿入するためのものですが、半分の行をカットするためにも機能します

于 2012-12-01T15:34:25.310 に答える
0

それは素晴らしい質問でした。本当に考えさせられるものの 1 つです。私は何らかの解決策を思いつきましたが、要素のいくつかの側面を制御する必要があります ( .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 に答える
0

jQuery を使用しないでください。CSSだけで解決できます。

shortdivのlong下に2 つのcontentdiv を記述します。から高さを削除しshortます。固定高さを に設定しcontentます。CSS プロパティline-heightとdiv を使用して、残りの半分の行を表示しますoverflow。short

于 2012-09-07T07:23:43.723 に答える