CSSで文末に省略記号をつける方法

目次

• 1行のとき
• 複数行のとき
• 最後に

1行の場合

text-overflow: ellipsis;をCSSに指定することで、テキストが枠から出てしまうときの文末が「…（3点リーダー）」になります。

あいうえおかきくけこさしすせそ

<p>あいうえおかきくけこさしすせそ</p>

p {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 150px;

	/* 装飾 */
	padding: 15px;
	border: 1px solid #333;
	background: #fff;
}

複数行の場合（IEなど一部のブラウザでは表示できません）

下記の記述でできますが、対応してないブラウザもあるため、そちらだけお気をつけください。（対応ブラウザはこちら。)

<div class="wrap">
	<p class="sample03">あいうえおかきくけこさしすせそたちつてと</p>
</div>

p{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* 2行目の末で省略する*/
	overflow: hidden;

}

.wrap{
	max-width: 150px;
	padding: 15px;
	border: 1px solid #333;
	background: #fff;
}

注意点

あいうえおかきくけこさしすせそたちつてと

なんだかおかしな表示になってませんか？
こういう中途半端な表示になる場合があるので やってみました。笑
さっきとの違いは、pタグにそのままCSSを全部記載している点です。paddingは囲んでいる方にかけると大丈夫ですので、気をつけてくださいね。

<p>あいうえおかきくけこさしすせそたちつてと</p>

p{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* 2行目の末で省略する*/
	overflow: hidden;
	max-width: 150px;
	padding: 15px;

	/* 装飾 */
	border: 1px solid #333;
	background: #fff;
}

最後に

他にも、擬似要素を使って表示することもできますが、、フォントなど状況によってうまくできない場合があります。なので１行の場合は「text-overflow: ellipsis;」、複数行になる場合は javascriptで実装するのがベターだと思います。
まだ時間かかるかもしれませんが、CSSでもサクッとできるようになると良いですね。