W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:nQ6Dta さんの質問

長い文章を省略して文末に「…」を付与したいのですが、省略はできても「…」が付きません。
原因が分かる方、教えていただけましたら嬉しいです。

【HTML】
<section class="textOverFlow">
<h1>タイトル</h1>
<p>本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文</p>
<p>本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文</p>
</section>

【CSS】
.textOverFlow{
width:500px;
height:400px;
overflow:hidden;
}

【jQuery】
jQuery(function($) {
$(’.textOverFlow’).each(function() {

var $target = $(this);

// オリジナルの文章を取得する
var html = $target.html();

// 対象の要素を、高さにautoを指定し非表示で複製する
var $clone = $target.clone();

$clone
.css({
display: ’none’,
position : ’absolute’,
overflow : ’visible’
})
.width($target.width())
.height(’auto’);

// DOMを一旦追加
$target.after($clone);

// 指定した高さになるまで、1文字ずつ消去していく
while((html.length > 0) && ($clone.height() > $target.height())) {
html = html.substr(0, html.length - 1);
$clone.html(html + "…");
}
// 文章を入れ替えて、複製した要素を削除する
$target.html($clone.html());
$clone.remove();
});
});

jQueryは下記のサイトに掲載されているものを使わせていただきました。
http://dev.classmethod.jp/ria/string-replace-css-and-jquery/

よろしくお願いします。

みんなの回答 5 件

ID:nQ6Dta さんの回答

すみません、補足です。
Firefoxだと「…」が表示されないようです。
クロームでは表示されました。

ID:FAFTPo さんの回答

cssでtext-overflow: ellipsisという解決方法もあるかと

ID:nQ6Dta

ご回答ありがとうございます。
教えていただいたものは、複数行の省略には対応していないみたいなんですよね。

ID:FAFTPo

あ、そうなんだ。知らなんだ。

ID:QJICkG さんの回答

while 内で ... を足すのはおかしい。終わってからじゃないの?

ID:nQ6Dta

ご回答ありがとうございます。
私も、初心者なのでなんとも言えないですが、最後でも良いのではと思いループの後に処理を書いてみたりもしましたが、結果は変わらずでした。

ID:pIbY45 さんの回答

求めておられる回答とは違うけど、
こういうの使うのはどう?日本語対応かわからんけども

Readmore.js: jQuery plugin for long blocks of text

http://jedfoster.com/Readmore.js/
ID:nQ6Dta

ありがとうございます。
デモを見ましたがいい感じですね。とても参考になりました!
どこかで使ってみたいと思います。

ID:b7VpqR さんの回答

これでいけるんじゃない?

jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 | BlackFlag

http://black-flag.net/jquery/20121010-4227.html
ID:nQ6Dta

ありがとうございます、できました!!
途中でtext関数が出てくるところをhtml関数に書き換えて実行したところ、段落などの見た目も崩れることなくできました。
ありがとうございました。

ID:b7VpqR

解決できてよかったです~ッ!

最終更新日:2013-10-04 (3,448 views)

関連するトピックス

ページ上部に戻る