れぶろぐ

2006-07-15 (土)

■ 長いディレクトリ名や URL を折り返す

tDiary の自作テーマの不具合に気が付いた。ブラウザの横幅を少しずつ狭めていくと、あるところで突然、サイドバーが下に追いやられてしまう。調べてみると、表の中に書かれているディレクトリ名が、折り返されずにつっかい棒のようになっていた。これが原因のようだ。

そこで、以前 pre タグに対して行ったワードラップの設定を、 table タグにも追加してみた。すると今度は、他の部分がつっかい棒になる。要するに、ディレクトリ名とか URL のような英数字の羅列は、折り返されないのが標準の設定らしい。

こうやって pre だの table だのといったタグに、１つ１つ折り返しの設定をしていくのが面倒になってきたので、以下のように、本文全体に対して折り返しの設定をしてみた。

body {
	……
	white-space: -moz-pre-wrap;  /* Mozilla */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	white-space: pre-wrap;       /* CSS3 */
	line-break: strict;          /* IE 5.5+ */
	word-break: break-all;
	word-wrap: break-word;
}

ところがこれだと、IE では上手くいくが、 Firefox で表示が激しく崩れてしまう。ならば、IE 用の設定だけを body タグに書けばいいのでは？と思い、以下のようにしてみた。

body {
	……
	line-break: strict;           /* IE 5.5+ */
	word-break: break-all;
	word-wrap: break-word;
}

pre {
	……
	white-space: -moz-pre-wrap;   /* Mozilla */
	white-space: -pre-wrap;       /* Opera 4-6 */
	white-space: -o-pre-wrap;     /* Opera 7 */
	white-space: pre-wrap;        /* CSS3 */
}

これでＯＫ。英単語がワードラップされなくなってしまうが、レイアウトはだいぶ崩れにくくなった。

Tags: tDiary |