FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法

overflow-xとoverflow-yプロパティ

　overflow-xとoverflow-yプロパティを利用すれば、ボックスに収まらないコンテンツの表示方法を横方向と縦方向で個別に指定することができる。overflow-xでは横方向の、overflow-yでは縦方向の表示方法を指定する。

　たとえば、次のサンプルではoverflow-xを「hidden」、overflow-yを「scroll」と指定して、縦方向にだけスクロールバーを表示するように指定している。

縦方向にのみスクロールバーが表示された

div	{
	overflow-x: hidden;
	overflow-y: scroll;
	width: 300px;
	height: 150px;
	border: solid 1px orange;
	}

※ブラウザで表示を確認する

　overflow-xとoverflow-yプロパティは、Internet Explorerが独自拡張したプロパティだったが、CSS 3の草案「CSS Basic box model」に採用され、標準化される見込みだ。これまではInternet ExplorerとFirefoxだけが対応していたが、Safariはバージョン3で、Operaはバージョン9.5で対応した。

text-overflowプロパティ

　overflowプロパティを「hidden」と指定して、ボックスに収まらないコンテンツを隠して表示した場合、text-overflowプロパティを利用すると省略符号「...」を表示することができる。ただし、コンテンツが横方向に収まらない場合にだけ有効だ。

　たとえば、次のサンプルではwhite-spaceプロパティを「nowrap」と指定して、ボックスの右端でコンテンツが自動改行されないように設定している。これでコンテンツはボックスの右側に溢れて表示される。

コンテンツが自動改行されず右側に溢れた

div	{
	white-space: nowrap; 
	width: 300px;
	border: solid 1px orange;
	}

<div>
あいうえお。かきくけこ。さしすせそ。たちつてと。なにぬねの。
</div>

※ブラウザで表示を確認する

　ここでoverflowプロパティを「hidden」と指定すると、右側に溢れたコンテンツは表示されなくなる。

1ページ目の例と同様、こちらも溢れた部分を「隠す」だけだ

div	{
	overflow: hidden;
	white-space: nowrap; 
	width: 300px;
	border: solid 1px orange;
	}

※ブラウザで表示を確認する

　さらに、text-overflowプロパティを「ellipsis」と指定すると、ボックス内のコンテンツの右端に省略符号「...」が表示される。なお、text-overflowプロパティにはInternet Explorerのバージョン6以上と、Safari、Operaが対応している。ただし、Safariでは-webkit-text-overflow、Operaでは-o-text-overflowと記述する。

溢れる部分があれば省略符号を表示する

div	{
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap; 
	width: 300px;
	border: solid 1px orange;
	}

※ブラウザで表示を確認する

　text-overflowプロパティは、Internet Explorerが独自拡張したプロパティだったが、CSS 3の草案「CSS Text」での採用が検討されている。

　次回はCSS 3で標準化が進められているマーキー（marquee）の機能を紹介する。