futuremix

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 でもこの方法でうまくいきました。

参考文献

• CSS：contentプロパティ中の改行: べつになんでもないこと