CSS で文字列を省略して末尾に省略記号（…）を付与して表示する方法

CSS で文字列を省略して末尾に省略記号（…）を付与して表示する方法を紹介します。

1. 文字列が一行の場合の対応方法

文字列が一行の場合の対応方法

対象の文字列が一行の場合の対応方法を紹介します。
実際の使用例とベースの HTML・CSS の指定は次の通りです。

ジョバンニが学校の門を出るとき、同じ組の七八人は家へ帰らずカムパネルラをまん中にして校庭の隅すみの桜さくらの木のところに集まっていました。

<p>ジョバンニが学校の門を出るとき、同じ組の七八人は家へ帰らずカムパネルラをまん中にして校庭の隅すみの桜さくらの木のところに集まっていました。</p>

次のコードは、対象の文字列が一行で横幅100pxに収まらない場合、末尾に省略記号を付与して表示します。

p {

  width: 100px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

横幅の指定 width: 100px; は適宜調整するか削除してください。
まずは white-space: nowrap; で、半角スペース・タブ・改行を1つの半角スペースとして表示します。
次に overflow: hidden; で、はみ出た部分を非表示にします。
最後に text-overflow: ellipsis; で末尾に省略記号（…）を付与します。

まとめ

CSS で文字列を省略して末尾に省略記号（…）を付与して表示する方法を紹介しました。