【CSS】はみ出したテキストを省略する方法を解説。複数行にも対応。

CSSのみでテキストを省略できる

長いテキストを「•••」で省略したい時、実はjQueryなどを使わずにCSSのみで実装可能です。

日常生活の中では、AmazonなどのECサイトで商品名などがよく「•••」で省略する処理が施されていたりしますよね。

本記事では、CSSのみでテキストを省略する方法について、1行・複数行に対応した方法をご紹介していきます。

※複数行のみ、モダンブラウザのみの対応となっておりますので、ご注意ください。

1行テキストの場合

1行のテキストを省略したい場合は、以下３つのCSSを適用します。

• text-overflow: ellipsis;
• overflow: hidden;
• white-space: nowrap;

＜↓以下サンプルです。＞

<div class="one_line">
　　<p>
  　　あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの
　　</p>
</div>

.one_line{
  padding: 5px;
  border: 1px solid #333;
　　box-shadow:1px 0px 10px #aaa;
}
.one_line p{
  width: 180px;
  border: 3px solid red;
  /* 1行のテキストを改行する */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

複数行テキストの場合

複数行にのテキストを省略したい場合は、以下４つのCSSを適用します。

※-webkitというプレフィックスの通りに、モダンブラウザ（Chrome、Safari）のみ対応してい流ため、他ブラウザをご利用の方の表示は異なります。ご了承ください。

• display: -webkit-box;
• -webkit-box-orient: vertical;
• -webkit-line-clamp: 3; /* 任意の数字 */
• overflow: hidden;

-webkit-line-clampに任意の数字を指定することで、指定した行までを表示することができます。

＜↓以下サンプルです。＞

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

.over_two_line{
  padding: 5px;
  border: 1px solid #333;
　　box-shadow:1px 0px 10px #aaa;
}
.over_two_line p{
  width: 180px;
  border: 3px solid red;
  /* 複数行のテキストを改行する */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}