血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > Resizing & Overflow (CSS3 UI)

xreaの広告です。

hosting by xrea.com

Resizing & Overflow (CSS3 UI)

作成:2011-11-19

resize

CSS2.1のoverflowプロパティと組み合わせて指定する。block要素であれば、どんな要素にも適用できるようなので、色々と試してみた。少なくとも、Firefoxはtd要素に対して効かないようで、Webkitは最初に指定したサイズより小さくすることができない模様。

対応状況

property IE Firefox Opera Webkit
resize--
div要素に、resize:both; overflow:scroll;を適用。
div要素に、resize:both; overflow:hidden;を適用。

div要素とp要素に組み合わせて適用。

pre要素に適用。
列1 列2 列3
行1table要素とtd要素に適用。
行2
行3

h3要素に適用。

from要素に適用。

text-overflow

対応状況

value IE Firefox Opera Webkit
clip
ellipsis
<string>---
2-value---

もとはCSS3 Textに存在したがUIに移動することになった。

clipの場合。はみ出した部分は切り取られる。

aabbccddeeffgg

ellipsisの場合。はみ出した部分より前から省略記号'…'(U+2026)に置き換えられる。

aabbccddeeffgg

値を <string> とした場合(Firefox9以降対応)。at-risk ここではカンマ(;;)とした。対応していれば省略記号としてカンマが表示され、対応していなければ、初期値のclipと同じ挙動を取る。

aabbccddeeffgg

2つの値を指定した場合(Firefox9以降対応)。at-risk

clip clip

aabbccddeeffgg

ellipsis ellipsis

aabbccddeeffgg

検証に使用したブラウザ

Internet Explorer
MSIE 10.0 Trident/6.0(IE10 Platform Preview 2)
Firefox
rv:11.0a1 Gecko/20111116 Firefox/11.0a1(Nightly Build)
Opera
Presto/2.9.220 Version/12.00(Opera Next)
Webkit
AppleWebKit/535.8 Chrome/17.0.940.0 Safari/535.8(Google Chrome Canary)

参考リンク