###ブラウザfirefoxで、複数行の文章を省略して文末を「...」にしたいです。
初めまして、プログラミング初心者です。
よろしくお願い致します。
###ソースコード
html
1<div class="explain_box"> 2 <p class="explain_comment"> 3 コメントコメントコメントコメントコメントコメントコメントコメント... 4 </p> 5</div>
上記のhtmlで、コメント部分が長文になった場合、実際にブラウザに表示されるコメントは4行までに省略され、4行目の文末に「...」を表示したいです。
ブラウザfirefoxの場合は、どうやればできますでしょうか?
CSSやjavascriptを用いればできるのでしょうか?
説明がわかりにくかったら申し訳ありません。
わかる方いらっしゃいましたら、すみませんが回答をよろしくお願い致します。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
ベストアンサー
ちょっと強引ですが…
200pxの中でだいたい何文字入るか試してから、文字数で区切ってしまうのはどうでしょうか?
下記では20文字としていますが、これを200pxに収まる文字数にするとか。
javascript
1$(document).ready(function(){ 2 $(".explain_comment").each(function(){ 3 var limit = 20; 4 var comment = $(this).text(); 5 var comment_sub = comment.substring(1,limit); 6 if(comment.length > limit) 7 $(this).text( comment_sub+"..." ); 8 }); 9});
投稿2016/01/22 14:18
総合スコア432
0
以前に書いたものの焼き直しなので変なところもあると思いますが、よろしければ。
あと、すみません、jQuery使ってます。
https://jsfiddle.net/no5yrxc8/
javascript
1$.fn.extend({ 2 ellipsize: function(arg) {this.each( function(){ 3 4 var target = $(this); 5 var _max_rows = parseInt(arg); 6 7 8 //measure line-height & text-width 9 target.css({ 10 'max-width': 'inherit', 11 'max-height': 'inherit', 12 'min-height': 'inherit', 13 'width': 'auto', 14 'height': 'auto', 15 'overflow': 'visible', 16 'white-space': 'nowrap', 17 'position': 'absolute' 18 }) 19 .children('br').hide(); 20 var line_height = target.height(); 21 var stretched_width = target.width() 22 target.css({ 23 'max-width': '', 24 'max-height': '', 25 'min-height': '', 26 'width': '', 27 'height': '', 28 'overflow': 'hidden', 29 'white-space': '', 30 'position': '' 31 }) 32 .children('br').show(); 33 34 var _max_height = (_max_rows+.5) * line_height; 35 36 targetText = target.html(); 37 do { 38 targetText = targetText.slice(0, -1); 39 target.html(targetText+'...'); 40 } while ( target.height() > _max_height ) 41 return target; 42 })} 43});
投稿2016/01/22 13:56
総合スコア36115
0
css
1 2.ellipsis { 3 width: 100%; 4 white-space: nowrap; 5 overflow: hidden; 6 text-overflow: ellipsis; 7 -webkit-text-overflow: ellipsis; 8 -o-text-overflow: ellipsis; 9} 10 11 12
width:100% なんで、このCSS は内側のタグに指定する。
外側のタグで幅をきめておく。
overflow: hidden なので、複数行になってしまう文字列は1行で表示されますが、幅固定してるので、内側タグで表示しきれない文字列の5文字くらい手前から...が表示されます。
半角英数と漢字文字では、微妙に ... の位置と大きさが異なります。
外側のタグの幅を広げると ... が消えます。
投稿2016/01/22 01:46
総合スコア1693
0
解答ではないのですが、firefoxにはDeveloper Editionというのがあって開発にはこちらのほうが使い勝手はいいようです。
紹介
投稿2016/01/21 21:43
編集2016/01/21 21:45総合スコア6851
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/01/22 11:56
2016/01/22 12:49
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/01/24 17:13