「jqueryとCSSで指定幅に収まるように文字数を減らす・複数行対応」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

jqueryとCSSで指定幅に収まるように文字数を減らす・複数行対応

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jqueryとCSSで指定幅に収まるように文字数を減らす・複数行対応</title>
<script href="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
.textOverflowLine {
overflow: hidden;
width: 400px;
border: 1px solid #ccc;
background: #eee;
}
</style>
<script type="text/javascript">
jQuery(function($) {
$('.textOverflowLine').each(function() {
// 行数
var row = 4;
var $target = $(this);
// オリジナルの文章を取得する
var html = $target.html();
var $clone = $target.clone();
$clone
.css({
display: 'none',
position : 'absolute',
overflow : 'visible'
})
.width($target.width())
.height('auto');
$target.after($clone);
// 必要な行数の高さを取得
var $temp = $clone.clone();
var _tempStr = "";
for (var i=0; i<row; i++) {
_tempStr += "あ<br>";
}
$temp.html(_tempStr);
$target.after($temp);
var targetHeight = $temp.height();
$temp.remove();
// 指定した高さになるまで、1文字ずつ消去していく
while((html.length > 0) && ($clone.height() > targetHeight)) {
html = html.substr(0, html.length - 1);
// 閉じタグの保管を考慮するためDOMに戻してから入れ直す
$clone.html($('<span>' + html + '</span>').html() + '...');
}
// 文章を入れ替え
$target.html($clone.html());
// 複製した要素を削除する
$clone.remove();
});
});
</script>
</head>
<body>
<div style="padding:10px;">
<h1>jqueryとCSSで指定幅に収まるように文字数を減らす・複数行対応</h1>
<div class="textOverflowLine">
むかしむかし、あるところに、おじいさんとおばあさんが住んでいました。<br />
おじいさんは山へしばかりに、おばあさんは川へせんたくに行きました。<br />
おばあさんが川でせんたくをしていると、ドンブラコ、ドンブラコと、大きな桃が流れてきました。<br />
「おや、これは良いおみやげになるわ」<br />
おばあさんは大きな桃をひろいあげて、家に持ち帰りました。<br />
そして、おじいさんとおばあさんが桃を食べようと桃を切ってみると、なんと中から元気の良い男の赤ちゃんが飛び出してきました。<br />
「これはきっと、神さまがくださったにちがいない」<br />
子どものいなかったおじいさんとおばあさんは、大喜びです。<br />
桃から生まれた男の子を、おじいさんとおばあさんは桃太郎と名付けました。<br />
桃太郎はスクスク育って、やがて強い男の子になりました。<br />
<br />
そしてある日、桃太郎が言いました。<br />
「ぼく、鬼ヶ島(おにがしま)へ行って、わるい鬼を退治します」<br />
おばあさんにきび団子を作ってもらうと、鬼ヶ島へ出かけました。<br />
旅の途中で、イヌに出会いました。<br />
「桃太郎さん、どこへ行くのですか？」<br />
「鬼ヶ島へ、鬼退治に行くんだ」<br />
「それでは、お腰に付けたきび団子を１つ下さいな。おともしますよ」<br />
イヌはきび団子をもらい、桃太郎のおともになりました。<br />
そして、こんどはサルに出会いました。<br />
「桃太郎さん、どこへ行くのですか？」<br />
「鬼ヶ島へ、鬼退治に行くんだ」<br />
「それでは、お腰に付けたきび団子を１つ下さいな。おともしますよ」<br />
そしてこんどは、キジに出会いました。<br />
「桃太郎さん、どこへ行くのですか？」<br />
「鬼ヶ島へ、鬼退治に行くんだ」<br />
「それでは、お腰に付けたきび団子を１つ下さいな。おともしますよ」<br />
こうして、イヌ、サル、キジの仲間を手に入れた桃太郎は、ついに鬼ヶ島へやってきました。<br />
</div>
</div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>