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

HTML・CSS 公開日:2012/07/20

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

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

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()

CONTACT

Webサイト制作のご相談やご質問、ご不明点などございましたらこちらよりお問い合わせください。
「ホームページ制作について」とお伝えください。担当者におつなぎいたします。

オフィス一覧へ

受付時間|9:00~18:00(土・日・祝除く)

※お電話にてお問い合わせの際はオフィス一覧からお近くのオフィスにご連絡ください

※全国対応

ホームページ無料診断 毎月10社限定

ホームページ制作のプロがユーザビリティ・SEO・競合などを多角的に分析し、
具体的な改善案をご提案します。

無料診断する