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

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

この記事のタイトルとURLをコピーする
特定の範囲から、ハミ出した長い文章を省略し、「…」と表示する方法
https://webkikaku.co.jp/blog/htmlcss/textoverflow/
facebook twitter hatena Pocket

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

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

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

この記事のタイトルとURLをコピーする
特定の範囲から、ハミ出した長い文章を省略し、「…」と表示する方法
https://webkikaku.co.jp/blog/htmlcss/textoverflow/
facebook twitter hatena Pocket

東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。
1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。

どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。

ご提案依頼・ご相談はこちら
公式facebook、twitterから情報を受けとる
いいね!する フォローする
前のページ
次のページ
ページトップ