CSSについてのメモ

この文書はウェブページのスタイルを指定するためにW3C(World Wide Web Consortium)が勧告しているCSS(Cascading Style Sheets)についての情報を書き留めたものです。

凡例: ブラウザの略称と動作確認

本文書ではブラウザ名を略称、続けてブラウザのバージョンを数字等で示す。例えばInternet Explorer 11であればIE11となる。なおPSVと3DSは括弧書きでシステムのバージョンを記載している。

各項目で動作確認の対象としているブラウザは、最新版が随時適用されるFxとGCは各項目記載時点での最新版、その他は手持ちのブラウザやバージョンを用いている。PSVと3DSを除く各ブラウザの動作OSは、SfがMac OS X、その他はWindowsを用いている。なお、動作確認の対象を総ての項目で統一していない点に注意されたい。

「text-overflow:ellipsis;」とブラウザ実装

HTML

<p>
  <span>いろは</span>にほへと(以下略)
</p>

CSS

p{
  color: green;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
}
p span{
  color: red;
  font-weight: 700;
}

before指定なしのIE8と9の描画例

IE8と9用に追加するCSS

p:before{
  content:''; /* IE8,9用 */
}

text-overflowプロパティはW3Cで未だ勧告に至らず草案に留まる(2013年8月時点)。ただし現状では多くのブラウザの描画に値「ellipsis」による指定が反映され、指定範囲から溢れる文字列の末尾に「…」が表示される。

Fx22、GC28、IE11preview、IE10、IE7、IE6、iOS6.1、Op12、PSV(2.12)、Sf6、3DS(6.1.0-12J)で確認した限り、省略記号のスタイル(字の色、太さ)は対象要素のスタイルに準ずる。「…」が縦方向の中央か下辺かは書体に依る。

IE8、IE9は一見すると以上と同様だが正確には要素先頭にある子要素の文字スタイルが反映され、ここで例示するHTMLではp要素内の先頭にある子要素spanへのスタイル指定が影響して「…」が太い赤で描画される。この現象の回避には対象要素のbefore擬似要素にcontent:'';を指定する。なお上記は総て書字方向「ltr」(左から右)での確認に留まる。

参考資料

• text-overflow - CSS | MDN
• -ms-text-overflow property (Internet Explorer)

• 問合せ先メールアドレス: i-ksnk.jp(-を@に置換え)
• 2013年8月5日更新

• コシヌケスペース