Eiji

2011年3月25日

CSSだけで文字列を省略して「・・・」を付けて表示する方法


javascriptやphp・perl等を使わずに
CSSだけで長い文章・文字列を省略して「・・・」を文末に付けて表示させる方法。

text-overflow: ellipsis; を使う。

ellipsis は、はみ出した部分の最後に「・・・」省略符号を付け足す。
逆に clip は、省略符号をつけません

ただ何故か、 text-overflow: ellipsis; だけだと上手くいかないので

横幅(width)
white-spce: nowrap
overflow:hidden;
の3つを指定する。

DEMO

CSS 適応前

いっぱい文章を書いたらオレンジの枠からあふれちゃったよ~、たすけてぇ~、ドラえも~ん!!

CSS 適応後

いっぱい文章を書いたらオレンジの枠からあふれちゃったよ~、たすけてぇ~、ドラえも~ん!!

HTML + CSS

<!-- CSS -->
<style>
.abbreviation {
	overflow: hidden;
	-o-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	text-overflow: ellipsis;
	width: 300px;
	white-space: nowrap;
}
</style>

<!-- HTML -->
<p class="abbreviation">
いっぱい文章を書いたらオレンジの枠からあふれちゃったよ~、たすけてぇ~、ドラえも~ん!!
</p>

CSSだけで文字列を省略して「・・・」を付けて表示する方法 (その2)


:after は CSS2 で追加された
要素の直前、直後に、contentプロパティで作った生成内容を挿入することができる疑似要素。
ちなみに直前は :before で、直後が :after

ざっくり言えば、<p>:after で作った「・・・」を <span>float:left; で左に表示させてる。

DEMO

CSS 適応前

いっぱい文章を書いたらオレンジの枠からあふれちゃったよ~、たすけてぇ~、ドラえも~ん!!

CSS 適応後

いっぱい文章を書いたらオレンジの枠からあふれちゃったよ~、たすけてぇ~、ドラえも~ん!!

HTML + CSS

<!-- CSS -->
<style>
.abbreviation2 p:after {
	content: "...";
}
.abbreviation2 span {
	float: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 300px;
}
</style>

<!-- HTML -->
<p class="abbreviation2">
<span>いっぱい文章を書いたらオレンジの枠からあふれちゃったよ~、たすけてぇ~、ドラえも~ん!!</span>
</p>

jQueryで文字列を省略して「・・・」を付けて表示する方法


「CSSだけで」ってタイトルに反する内容だけど、「jQuery版」のやり方もあったので、忘れないうちにφ(`д´)メモメモ...

この「jQuery版」では、ある文字数を超えたら省略記号の「…」に置き換える。

DEMO

実行前

  • このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。
  • これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。
  • このダミーテキストは文字数カット用です。

実行後

  • このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。
  • これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。
  • このダミーテキストは文字数カット用です。

HTML+ jQuery + CSS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
	var $setElm = $('div.abbreviation3>ul li');
	var cutFigure = '30'; // カットする文字数
	var afterTxt = ' …'; // 文字カット後に表示するテキスト

	$setElm.each(function(){
		var textLength = $(this).text().length;
		var textTrim = $(this).text().substr(0,(cutFigure))

		if(cutFigure < textLength) {
			$(this).html(textTrim + afterTxt).css({visibility:'visible'});
		} else if(cutFigure >= textLength) {
			$(this).css({visibility:'visible'});
		}
	});
});
</script>

<!-- CSS -->
<style>
.abbreviation3 ul,
.abbreviation3 li {
	visibility: hidden;
}
</style>
</head>

<body>
<!-- HTML -->
<div class="abbreviation3">
<ul>
<li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。</li>
<li>これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。</li>
<li>このダミーテキストは文字数カット用です。</li>
</ul>
</div>
</body>
</html>

CSS側ではページが読み込まれる際、元の長い文字列が表示されないように、カットさせる要素 <ul><li>visibility: hidden; で非表示にしておきます。

実際に文字列をカットさせるスクリプト側では、リストの文字数が30文字以上になった場合のみ末尾に「…」をつけた形でカットされます。(30文字以下だったらそのまま表示)

スクリプト開始部分にある

var $setElm = $('div.abbreviation3>ul li'); 文字数カットを対象にする要素(クラス名などでも可)
var cutFigure = ’30′; カットする文字数
var afterTxt = ‘ …’; カット後に表示するテキスト

となっているので、
これらの値を変更することでもろもろ調整が可能になっています。



Web制作・記事一覧