webruaryと黒猫のウィズ

webruaryの記事一覧 webruaryのRSS

通常のブログ。http://webruary.net/


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でのバグ)。のサンプルページ。

回避策としては

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

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

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

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

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

このエントリーをはてなブックマークに追加

Sponsored Links

Comment : 4

  1. usuproURL 2008-09-16 (火) 20:04

    人柱見舞。
    http://usupro.asablo.jp/blog/2008/02/01/3767177

    おお!できたできた。
    他力本願。教えて君。なんと言われようとサンクス。。
    今回の記事はマウスのレンタル代にさせていただきます。領収書いる?

  2. chobirURL 2008-09-17 (水) 08:47

    イイってことよ。
    自分も<pre>を振り返るのにイイ機会だったんで。

    ってか、そろそろマウスを返品しないと。
    VX-Rが届いたんでMX-Rは机の引き出しにそっとしまっておいてるんで。
    領収書…は…結構です(´・ω・`)

  3. usuproURL 2008-09-17 (水) 09:56

    いらないから次会う時でいい。

  4. chobirURL 2008-09-17 (水) 11:14

    いらないってwwwww
    もったいない…。

Comment Form

Track Back : 0

この記事のトラックバックURL
http://webruary.blog37.fc2.com/tb.php/26-09fe6bf4

トラックバック一覧