text-overflowを使ってみる

はみ出した文章を文末に「…」をつけて省略する「text-overflow: ellipsis;」を使ってみます。

対応ブラウザ

text-overflowが対応しているブラウザはこちら。
IEは6でも対応しているようです。

サンプルコード

text-overflowを使用する場合、合わせてoverflow: hidden;とwhite-space: nowrap;を指定します。

HTML

<div class="text-overflow">私は半分断然その運動院という事の時に進んたます。とうてい当時に留学打はもっとその学問ませましだけへ待っがしまいないには破壊勧めですたて、始終には打ち壊すたないでまし。申をさだろものはとうとうほかをついうませまし。どうか岡田さんに留学憚あまり議論をありです自我この兄君か教育をというお濫用ないなくんないて、この結果も私か書物人にして、大森君の事を西洋の何に多分お享有と立って私例外に実買収に聴いようにもう大拡張よりできですんて、よほどもし誘惑に妨げうばいるでのを込み入っななら。つまりだからご坊ちゃんをありはずもどう自由というて、その倫理をは入っますてとして他人をして来たなかっ。</div>

CSS

.text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

text-overflowを使ってみるデモページ
　

サンプルコード

もっと見るボタンを設置して、全文を表示させてみます。

HTML

<div class="text-overflow-area">
<div class="text-overflow">私は半分断然その運動院という事の時に進んたます。とうてい当時に留学打はもっとその学問ませましだけへ待っがしまいないには破壊勧めですたて、始終には打ち壊すたないでまし。申をさだろものはとうとうほかをついうませまし。どうか岡田さんに留学憚あまり議論をありです自我この兄君か教育をというお濫用ないなくんないて、この結果も私か書物人にして、大森君の事を西洋の何に多分お享有と立って私例外に実買収に聴いようにもう大拡張よりできですんて、よほどもし誘惑に妨げうばいるでのを込み入っななら。つまりだからご坊ちゃんをありはずもどう自由というて、その倫理をは入っますてとして他人をして来たなかっ。</div>
<button class="more">もっとみる</button>
</div>

CSS

.text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.open .text-overflow {
	white-space: normal;
}
.open .more {
	display: none;
}

JavaScript

$(function() {
	$(document).on('click', '.more', function() {
		$(this).parent().addClass('open');
	});
});

text-overflowを使ってみるデモページ2
　

【参考サイト】

• CSSではみ出した文字を省略する「text-overflow: ellipsis;」がいつの間にかPCでも使えるようになってた！ – tacamy.blog