はじめに

「表示させる文字数を制限させる」の場合、かつてはPHPで行うことが多かったのですが、レスポンシブが当然である今日、CSSで制限する方法が柔軟で使う機会が多いと思われます。

実施例のHTML

<p class="sample">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ</p>

1行表示の場合

実施例

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ

わかりやすくするため、上記の例では枠線を設けています。

.sample
{
	overflow:hidden; /* はみ出した部分を隠す */
	text-overflow:ellipsis; /* 3点リーダー(...)を表示 */
	white-space:nowrap; /* 改行しないように */
	width:8em; /* 幅指定 */
}

複数行表示の場合(行数制限)

実施例

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ

わかりやすくするため、上記の例では枠線を設けています。

.sample
{
	overflow:hidden; /* はみ出した部分を隠す */
	display:-webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* 行数指定 */
	width:8em; /* 幅指定 */
}

最後に

ホームページの新規制作・リニューアルは、神奈川県相模原市にあるオフィス木蓮までお気軽にご相談ください。お見積もりは無料です。セキュリティ対策を最優先とし、基本的ではあるものの高スコアなSEO対策、ユーザーの使い勝手などを考慮したサイトを提案します。他社で制作されたホームページの更新作業やメンテナンスにも対応しますのでお気軽にお問い合わせください。