【CSS】text-overflowで文字列を折り返さずに三点リーダーで省略する

文字数の多い見出しなどが要素の表示領域幅を越えた際、
通常折り返される文字列の折り返しを禁止して代わりに末尾に三点リーダーを付けて省略する方法を記述します。

今回のサンプルでは末尾が省略された文字列に記事の詳細ページがリンクされている。
※記事引用元
yahoo ニュース
https://headlines.yahoo.co.jp/hl?a=20180708-00000038-jij_afp-int

遷移リンク先(記事本文ページ)

HTML

CSS


CSSのwhite-spaceプロパティをnowrapとし、文字列が要素の幅を越えた時に折り返さないようにする。
※今回の表示領域幅は文字列の親要素のdivに適用されているnewクラスで指定されているwidth:70% となる。


overflow:hiddenとして折り返さずに領域幅からはみ出した文字列を非表示にする。


text-overflow: ellipsis として折り返した文章が省略されている事を示すために末尾を三点リーダーにする。

ハマった点。

・text-overflowで三点リーダーをつける前提条件として、overflow をvisible以外の値に指定する。

・文字列を囲むタグが pタグ(ブロックレベル要素)の場合、cssでプロパティを設定する際、クラス名に続いてpタグまで指定しないとtext-overflow:ellipsisが効かない。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください