2018/07/12更新

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

このエントリーをはてなブックマークに追加            

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



目次




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

1行の文章の文末を省略するには、CSSのtext-overflow: ellipsis;を使います。
実際にはwidthoverflowwhite-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、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。