preタグ内の文章を自動改行してみる。webruarywebruaryホームWebpreタグ内の文章を自動改行してみる。preタグ内の文章を自動改行してみる。Category:Web2008-0916Comments4TrackBack0なるべく<div>を使わないでコーディング。コメント欄でリクエストされたので<pre>タグ内の自動改行についていろいろと。自分も基本<pre>なんてめったに使わないし、このブログで使ってる際も横に短いんでFirefoxとかで自動改行されないことなんて知らなかった訳で...。そこで、ちょちょいと調べた結果Bowz::Notebookさんで紹介されているcssで対処できると判明。ここから続きとりあえず、サンプルを作ってみたのでどうぞ。<pre>内の文章を自動改行する。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がフライング導入してるらしいです。́・ω・`)まぁ、「べっ...べつに気にしないんだからッ。」って方にはヨイ方法です。調べた結果はこんなトコですが、上記のサンプルを作ってる最中にIEの面白いバグを見つけたので公開してみます。;゚Д゚)))ガクガクブルブルそこには無いはずの文字が...。冗談はさておき、原因は<pre>を何かしらのタグ(<div>とか)で囲んで、且つ、その<pre>に対して『padding』を指定していることです。<pre>内の文章を自動改行する(IEでのバグ)。回避策としてはCSSで<pre>かその囲んだタグ(上記のサンプルだと<div>)に『width』を指定する。HTMLで<pre>の前に何かしらの『日本語』を指定する。</div>ってことです。今回は『h3』になってますが、<h1>でも<h2>でもはたまた<p>でも構いません。ついでに、上記の『日本語』の部分を、例えば『test』等の英語のみにすると、改行されるところで心霊g(ry...文字が2重に表示されます。いやぁ、IEバグってほんっっっとぉにイラッときますね。それではまたお会いしましょう。この記事についてるタグタグはありません。»CSSで画像の上に背景画像を乗っける方法。»Netvibesにストレージ機能を追加。»preタグ内の文章を自動改行してみる。»タグに複数のclassを同時指定する方法。»テンプレートの<div>が2つ減りました。http://usupro.asablo.jp/blog/2008/02/01/3767177おお!できたできた。