特定の範囲から、ハミ出した長い文章を省略し、「…」と表示する方法

特定の範囲から、ハミ出してしまった文章を省略し、「…」と表示する方法をご紹介します。

あまり使用する機会は無いかもしれませんが、例えばウェブマガジン系の記事タイトルなんかは、長くなりがちなので、パンくずリストのレイアウトに困ったりします。そういった時に、是非使ってみて下さい。

CSSで実装します

省略したい文章の、親要素に次のようなCSSを付与します。

【省略予定の文章】

<div class="shortcut">最近は、めっきり夏になってしまって、半ズボンを履くかどうか悩んでいます。</div>

【CSS】

.shortcut {
    width: 300px; /* 要素の横幅を指定 */
    white-space: nowrap; /* 横幅のMAXに達しても改行しない */
    overflow: hidden; /* ハミ出した部分を隠す */
    text-overflow: ellipsis; /* 「…」と省略 */
    -webkit-text-overflow: ellipsis; /* Safari */
    -o-text-overflow: ellipsis; /* Opera */
}

【実際の表示】

という感じです。

ここで注意していただきたいのは、この方法では何行にも渡っている文章を省略できないということです。もし何行にも渡る文章を省略したい場合はjqueryで処理するしかありません。

その方法については以下のサイトがおすすめです。

文字列を省略して「…」を付与する方法 – CSS/jQuery ｜ Classmethod.dev()