【CSS】text-overflowで文字列を折り返さずに三点リーダーで省略する
文字数の多い見出しなどが要素の表示領域幅を越えた際、
通常折り返される文字列の折り返しを禁止して代わりに末尾に三点リーダーを付けて省略する方法を記述します。
今回のサンプルでは末尾が省略された文字列に記事の詳細ページがリンクされている。
※記事引用元
yahoo ニュース
https://headlines.yahoo.co.jp/hl?a=20180708-00000038-jij_afp-int
遷移リンク先（記事本文ページ）
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="news"> <div class="newsText"> <a href="post/post001.html">【AFP＝時事】スペイン北部パンプローナ （Pamplona）で8日、毎年恒例の「サン・フェルミン祭（San Fermin Festival）」の牛追い が2日目を迎えた。祭りの期間中、牛追いは毎朝8時にスタート。大勢の男たちと雄牛たちが曲 がりくねった狭い路地の約850メートルを闘牛場まで駆け抜ける。</a> </div> </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@charset "UTF-8"; .container { max-width: 980px; margin: 0 auto; } .news { width: 70%; margin: 0 auto; padding: 30px; } .newsText { /*①*/ white-space: nowrap; /*②*/ overflow: hidden; /*③*/ text-overflow: ellipsis; } |
①
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!
