CSS の content で改行する方法

2010-10-8 09:00
このエントリーをはてなブックマークに追加

CSS の content で改行をさせたい時があります。たとえば引用ブロックで引用元を明示したい場合などに使います。

blockquote[title][cite]:after {
	display: block;
	text-align: right;
	font-size: smaller;
	content: "『" attr(title) "』\A(" attr(cite) ")";
}

このとき、改行したい部分を \A で指定します。しかし Opera では改行されて見えるものの、Firefox (Gecko) では改行コード(CRやLF)が挿入されるだけで、結果的には折り返されません。

<br/>が挿入されるわけではないので、実際には折り返されて見えないのです。これは Firefox (Gecko) のバグかと思っていたのですが、実はこれが CSS の仕様だそうです。

で、期待した結果を得るためには、次の指定も合わせて行なえばいいということでした。

  white-space: pre;

これは W3C の CSS2.1 の定義にも書かれていました。

わかってしまえば当たり前のことですが、いままでわからなかったので、目からウロコが落ちました。IE8, IE9 beta でもこの方法でうまくいきました。

参考文献

コメントはまだありません

No comments yet.

Sorry, the comment form is closed at this time.

33 queries. HTML convert time: 0.070 sec. Powered by WordPress. Valid XHTML
Copyright © 2003-2017 @ futuremix.org ログイン