preタグ内の文章を自動改行してみる。
Category:Web
なるべく<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でのバグ)。のサンプルページ。
回避策としては
- CSSで<pre>かその囲んだタグ(上記のサンプルだと<div>)に『width』を指定する。
- HTMLで<pre>の前に何かしらの『日本語』を指定する。
上記の2番に関しては、つまり
<div> <h3>日本語</h3> <pre>自動改行自動改行.....</pre> </div>
ってことです。
今回は『h3』になってますが、<h1>でも<h2>でもはたまた<p>でも構いません。
ついでに、上記の『日本語』の部分を、例えば『test』等の英語のみにすると、改行されるところで心霊g(ry…文字が2重に表示されます。
いやぁ、IEバグってほんっっっとぉにイラッときますね。
それではまたお会いしましょう。
この記事についてるタグ
タグはありません。
関連記事
- »CSSで画像の上に背景画像を乗っける方法。
- »Netvibesにストレージ機能を追加。
- »preタグ内の文章を自動改行してみる。
- »タグに複数のclassを同時指定する方法。
- »テンプレートの<div>が2つ減りました。
Sponsored Links
Comment : 4
Track Back : 0
- この記事のトラックバックURL
- http://webruary.blog37.fc2.com/tb.php/26-09fe6bf4
usuproURL 2008-09-16 (火) 20:04
人柱見舞。
http://usupro.asablo.jp/blog/2008/02/01/3767177
おお!できたできた。
他力本願。教えて君。なんと言われようとサンクス。。
今回の記事はマウスのレンタル代にさせていただきます。領収書いる?
chobirURL 2008-09-17 (水) 08:47
イイってことよ。
自分も<pre>を振り返るのにイイ機会だったんで。
ってか、そろそろマウスを返品しないと。
VX-Rが届いたんでMX-Rは机の引き出しにそっとしまっておいてるんで。
領収書…は…結構です(´・ω・`)
usuproURL 2008-09-17 (水) 09:56
いらないから次会う時でいい。
chobirURL 2008-09-17 (水) 11:14
いらないってwwwww
もったいない…。