ブラウザfirefoxで、複数行の文章を省略して文末を「...」にしたいです。

Question

###ブラウザfirefoxで、複数行の文章を省略して文末を「...」にしたいです。

初めまして、プログラミング初心者です。
よろしくお願い致します。

###ソースコード

<div class="explain_box">
  <p class="explain_comment">
      コメントコメントコメントコメントコメントコメントコメントコメント...
  </p>
</div>

上記のhtmlで、コメント部分が長文になった場合、実際にブラウザに表示されるコメントは4行までに省略され、4行目の文末に「...」を表示したいです。

ブラウザfirefoxの場合は、どうやればできますでしょうか？
CSSやjavascriptを用いればできるのでしょうか？
説明がわかりにくかったら申し訳ありません。

わかる方いらっしゃいましたら、すみませんが回答をよろしくお願い致します。

Answer 1

ちょっと強引ですが…
200pxの中でだいたい何文字入るか試してから、文字数で区切ってしまうのはどうでしょうか？
下記では20文字としていますが、これを200pxに収まる文字数にするとか。

$(document).ready(function(){
  $(".explain_comment").each(function(){
    var limit = 20;
    var comment = $(this).text();
    var comment_sub = comment.substring(1,limit);
    if(comment.length > limit)
      $(this).text( comment_sub+"..." );
  });
});

Comments

[y_43]

jincoさん
回答していただきどうもありがとうございます！

これを参考に、文字数で区切ってやってみました！
ありがとうございました！

Answer 2

以前に書いたものの焼き直しなので変なところもあると思いますが、よろしければ。
あと、すみません、jQuery使ってます。
https://jsfiddle.net/no5yrxc8/

$.fn.extend({
  ellipsize: function(arg) {this.each( function(){

    var target = $(this);
    var _max_rows = parseInt(arg);

    
    //measure line-height & text-width
    target.css({
      'max-width': 'inherit',
      'max-height': 'inherit',
      'min-height': 'inherit',
      'width': 'auto',
      'height': 'auto',
      'overflow': 'visible',
      'white-space': 'nowrap',
      'position': 'absolute'
    })
      .children('br').hide();
    var line_height = target.height();
    var stretched_width = target.width()
    target.css({
      'max-width': '',
      'max-height': '',
      'min-height': '',
      'width': '',
      'height': '',
      'overflow': 'hidden',
      'white-space': '',
      'position': ''
    })
      .children('br').show();

    var _max_height = (_max_rows+.5) * line_height;
  
    targetText = target.html();
    do {
      targetText = targetText.slice(0, -1);
      target.html(targetText+'...');
    } while ( target.height() > _max_height )
    return target;
  })}
});

Comments

[Lhankor_Mhy]

あ、JSFiddleのサンプルは、"exec"ボタンを押してみてください。

[think49]

私の環境(Google Chrome 48.0.2564.82 m)では [exec] ボタンを押したらブラウザが固まりました。

[y_43]

Lhankor_Mhyさん
回答していただきどうもありがとうございます！

ぜひ今後の参考にしていただきます！

Answer 3

.ellipsis {
   width: 100%;
    white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

width:100% なんで、このCSS は内側のタグに指定する。
外側のタグで幅をきめておく。
overflow: hidden なので、複数行になってしまう文字列は1行で表示されますが、幅固定してるので、内側タグで表示しきれない文字列の5文字くらい手前から...が表示されます。
半角英数と漢字文字では、微妙に ... の位置と大きさが異なります。
外側のタグの幅を広げると ... が消えます。

Comments

[ipadcaron]

4行目の末尾だけ、か、、、工夫次第ですね。上記のcss では2
行以上には対応できません。

[y_43]

ipadcaronさん
回答していただきどうもありがとうございます。

そうですね、１行ではなく複数行で省略する場合のやり方ですね。
そうですよね、工夫次第ですよねー。
ただでもその工夫が思いつかないのと、調べてもよくわからなくて困ってるのですー。

Answer 4

解答ではないのですが、firefoxにはDeveloper Editionというのがあって開発にはこちらのほうが使い勝手はいいようです。
紹介

Comments

[cateye]

４行と言ってもブラウザの幅を変えれば文字数も変わりますがそれは考えなくてもいいのでしょうか？　もしそうなら、表示しようとした文字列が４行に収まらない場合、そこで切って"..."を足せばいいのではないでしょうか？　web関連はまったくの初心者なので外してるかも知れませんが・・・

[y_43]

cateyeさん
回答していただきどうもありがとうございます。

Developer Editionというものがあるのですね。今後の参考にさせていただきます。

すみません、書いていなくてわかりにくかったですね。上のhtmlの場合、.explain_boxの幅は例えば200pxなどの特定の幅にし、
その幅の中で４行以内に収まるコメントの場合は、コメント全文を表示し末尾に...は付けず、
逆にその幅の中で4行以降にも続いてしまう場合は４行以降は省略し、４行目の末尾に...を付ける、ということがしたかったのです。