webruary

なるべく<div>を使わないでコーディング。という目標。のコメント欄でリクエストされたので<pre>タグ内の自動改行についていろいろと。

まぁ、自分も基本<pre>なんてめったに使わないし、このブログで使ってる際も横に短いんでFirefoxとかで自動改行されないことなんて知らなかった訳で…。
そこで、ちょちょいと調べた結果Bowz::Notebookさんで紹介されているcssで対処できると判明。

ここから続き

とりあえず、サンプルを作ってみたのでどうぞ。
<pre>内の文章を自動改行する。のサンプルページ。

ちなみに、今回の検証には『WindowのInternet Explorer 7と6』『WindowのFirefox 3と2』『WindowのOpera9.5』『WindowのSafari3.1』を使用しております。
Macは無いので検証しておりません。あしからず。

簡単に説明すると「white-space:pre-wrap;」がCSS3に対応したブラウザ用。現時点だとFirefox3とOpera9.5。
Firefox3はFirefox用として指定している、Mozzilaのcss独自拡張「white-space:-moz-pre-wrap;」でもいけますが、いずれ削除される予定らしいです。 で、あと「white-space:-pre-wrap;」と「white-space:-o-pre-wrap;」がOpera用で前者が4～6、後者が7以降用です。
IE用の「word-wrap:break-word;」は、CSS3から定義されるかもしれないと言うモノですが、IEがフライング導入してるらしいです。

ただ、これだとW3CのCSS検証でエラーになるのが悔しい(´･ω･`)
まぁ、「べっ…べつに気にしないんだからッ。」って方にはヨイ方法です。

と、まぁ、調べた結果はこんなトコですが、上記のサンプルを作ってる最中にIEの面白いバグを見つけたので公開してみます。

コッ…コレはッ…!?
まさに心霊写真状態((( ；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ
そこには無いはずの文字が…。

…。

冗談はさておき、原因は<pre>を何かしらのタグ(<div>とか)で囲んで、且つ、その<pre>に対して『padding』を指定していることです。
<pre>内の文章を自動改行する(IEでのバグ)。のサンプルページ。

回避策としては

1. CSSで<pre>かその囲んだタグ(上記のサンプルだと<div>)に『width』を指定する。
2. HTMLで<pre>の前に何かしらの『日本語』を指定する。

上記の2番に関しては、つまり

<div>   <h3>日本語</h3>   <pre>自動改行自動改行.....</pre> </div>

ってことです。
今回は『h3』になってますが、<h1>でも<h2>でもはたまた<p>でも構いません。
ついでに、上記の『日本語』の部分を、例えば『test』等の英語のみにすると、改行されるところで心霊g(ry…文字が2重に表示されます。

いやぁ、IEバグってほんっっっとぉにイラッときますね。
それではまたお会いしましょう。