• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2019/09/10
書いた人:
rurippa!
カテゴリ:
CSS   HTML
452 views

CSSを使って、文末に省略記号(…)をつける方法を紹介します。

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

目次

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;
}

最後に

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


この記事を読んだ人はこんな記事も読んでいます