[フロントエンド] 文章の文末を省略するためCSS実装を3つ（1行の場合と、複数行の場合）

こんにちは、@yoheiMuneです。
今日はCSSを用いて、文章の末尾を省略する方法を、ブログに書きたいと思います。

目次

文章が1行の場合の文末省略

1行の文章の文末を省略するには、CSSのtext-overflow: ellipsis;を使います。
実際にはwidth、overflow、white-spaceのプロパティも合わせて指定します。

<p class="oneline-ellipsis">おはよう、こんにちは、さようなら、おやすみなさい。</p>
<style>
.oneline-ellipsis {

    /* 1. 横幅を指定する */
    width : 200px;

    /* 2. はみ出した場合に、hiddenにする */
    overflow: hidden;

    /* 3. 自動的な折り返しはしない */
    white-space: nowrap;

    /* 4. 省略表現を指定する */
    text-overflow: ellipsis;
}
</style>

▼デモ▼

おはよう、こんにちは、さようなら、おやすみなさい。

複数行の場合に省略表現をする（Webkit限定）

スマホ向けサイトなどWebkitの利用に制限できる（=iPhoneとAndroidに限定できる）場合、-webkit-line-clampを使うと便利です。

<div class="line-clamp-box">
    <p>こんにちは、こんにちは、こんにちは、こんにちは、こんにちは、こんにちは、こんにちは、こんにちは、こんにちは、こんにちは</p>
</div>
<style>
.line-clamp-box {
  background-color: #fff;
  box-shadow: 2px 2px 10px #246756;
  padding: 2em;

  /* 1. Boxの横幅を指定します */
  width: 200px;
}

.line-clamp-box p {

  /* 2. -webkit-boxを指定します */
  display: -webkit-box;

  /* 3. 行数を指定します */
  -webkit-line-clamp: 3;

  /* 4. 合わせてこの指定も必要です */
  -webkit-box-orient: vertical;  

  /* 5. はみ出すものは隠します */
  overflow: hidden;
}
</style>

▼デモ▼

※ デモを正しく動作させるためには、Chromeなどのブラウザで確認してください。

-webkit-boxの指定が古いので、今後どのようになるのかは不安ですが、現状では便利に使えます。

擬似要素を用いて省略表現を行う

文章の最後に、透明から背景色へグラデーションする要素を置くことで、綺麗にホワイトアウトすることができます。三点リーダーではない表現ですが、これでも文章の省略を行うことができます。

<div class="whiteout">
    <p>こんにちは、こんにちは、こんにちは、こんにちは、こんにちは、こんにちは、こんにちは、こんにちは、こんにちは、こんにちは</p>
</div>
<style>
.whiteout {
  background-color: #fff;
  box-shadow: 2px 2px 10px #246756;
  padding: 2em;

  /* 1. Boxの横幅と縦幅を指定します */
  width: 200px;
  height: 4em;

  line-height: 2em;
}
.whiteout p {
    position: relative;

    /* 2. はみ出した場合の設定をします */
    height: 100%;
    overflow: hidden;
}

/* 3. ホワイトアウトを表現します */
.whiteout p::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 1.6em;
  content: "";
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}
</style>

▼デモ▼

最後に

今回はCSSでの対応方法を紹介しましたが、そのほかにはClamp.jsなどのJavaScriptを用いた対応もできます。ただJavaScriptの場合には、初期表示でがたつく場合もあるので、CSSでできると素敵です。要件に応じた選択ができるいいですね。

最後になりますが本ブログでは、フロントエンド、PHP、サーバー、インフラ、Swift、Node.js、Python、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！