【CSS】text-overflow: ellipsis;を使って はみ出した文字を「・・・」で省略

2015/03/17 サイト制作, 技術系 投稿者:竹内

CSSの小技 その5 今回は「text-overflow: ellipsis;を使って はみ出した文字を「・・・」で省略」です。
ブログの記事などで最初の数行を表示して残りを「・・・」や「続きを読む」などで省略するのを見かけます。
ブログだけでなく、Webサイト制作でスマホ対応をする際に、ニュースのタイトルや記事など文字数が確定していない部分について スマホの縦表示でも横表示でも綺麗にレイアウトするためにこの手法が便利でした。
本ブログのトップページでは[・・・]を使って省略しています。
これをtext-overflow: ellipsis;を使ってCSSのみで表現することが可能です。

text-overflowプロパティとは

テキストが表示領域からはみ出している(隠れてしまった部分がある)事をブラウザ上で表示するためのプロパティです。
最近の主要ブラウザでは問題なく動作するようです。

実装方法

HTML

CSS

アレンジ

「・・・」を「…」や「,」など任意の記号にしたり、記号を使わずに切り取るだけにすることも可能ですが、 こちらの機能はFirefoxのみの対応で、その他のブラウザでは通常の「・・・」が表示されるようですので汎用性はあまり高いとは言えません。

HTML

CSS

他にも・・・

はみ出たテキストのお尻側を省略するのではなく冒頭のテキストを省略したり、 冒頭とお尻側両方を省略したり、さらに冒頭とお尻で別の記号を用いたりと 「そんな使い方するかなぁ」といったことも出来るようです。
ちょっと用途が思いつきませんが、そんなこともできるよと言うことだけ覚えておくと 何か役に立つことがあるかもしれません。

カレンダー

    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)