複数行テキストの文字数制限は調べれば方法はいくつか出てきます。

そうやって省略したテキストだけど、クリックで全文が表示できるようにしたいっていう要望もあるんじゃないかなと思います。

その方法について、テキストに文字数制限しつつの流れとして開設しているのがなかったので記事にすることにしました。

PHPやJavascriptは使用せず、CSSのみでやっていきます(‘ω’)

動作デモ

HTML

<div class="wrap">
	<input type="checkbox" id="showtext" name="showtext">
	<label for="showtext" class="description">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</label>
</div>

CSS

.description{
	cursor: pointer;
	overflow:hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
#showtext{
	display:none;
}
#showtext:checked ~  .description{
	display:block;
}

簡単な説明

cursor: pointer; マウスカーソルをポインターにしてクリックできることを知らせる。

overflow:hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

で、はみ出た部分を … で省略するように。

-webkit-line-clamp: 3; の3で3行表示を指定。

あとは疑似要素:checkedを使って display: -webkit-box; とて display: block; を切り替えている感じです。

おまけ

display を使うと表示についてのアニメーションがうまくできなるんだよね(;´・ω・)

そこを力技で、それっぽく見えるようなアニメーションを作ってみました。

追加するCSSは次の通り。

.description,#showtext:checked ~ .description{
	animation-name: close;
	animation-duration: .3s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}
#showtext:checked ~ .description{
	animation-name: open;
}

@keyframes open {
	0% {
		background:#ddd;
	}
	40% {
		background:#eee;
	}
	100% {
		background:#fff;
		padding:5px 0;
	}
}
@keyframes close {
	0% {
		background:#ddd;
		padding:5px 0;
	}
	40% {
		background:#eee;
	}
	100% {
		background:#fff;
		padding:0;
	}
}

テキスト自体は0秒で表示してるけど、背景と僅かな padding でなんとか・・・。

フワっとしているように見えるかな!?