表示枠に収まらない改行が入っていない長い文字列を<pre>タグで表示させると、IEでは表示枠の横幅で折り返して表示してくれるのですが、firefoxだと折り返して表示してくれません。
firefoxでも正常に折り返して表示させる方法はないでしょうか?
cssには以下のように書いています。
pre {
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
No.4
- 回答日時:
そもそも<pre>タグは整形済みであることを示すタグです。
つまり、折り返してしまっては意味がないと思うのですが。よって、<pre>や<code>のような折り返さないで見せた方が良い要素は、CSSのoverflowプロパティを用いて、スクロールバーを出した方がよろしいかと思います。
実装の仕方は以下の通り
▼HTMLソース
<div>
<pre>
<code>プログラムソース</code>
</pre>
</div>
▼CSSソース
div { overflow : auto ; }
pre { overflow : auto ; }
※基本的にpreのみoverflowを指定すれば良いのですが、ブラウザによって解釈が違うので、overflowは<div>に指定するのが好ましいようです。
私はこの方法で、IE,NN,FireFox,opera,Mozillaに対応しています。Mac版IEでも多分表示されるはずです。
No.3
- 回答日時:
複雑な書き方をしているのが少々・・?なのですが^^;
例:
<style type="text/css">
<!--
pre { white-space:normal;
width: 300px;
color:#ff0000;
background-color: #ccffff;
word-wrap: break-word;
}
-->
</style>
という単純な記述だと、
Mac Safari2.0.4、Firefox1.5.0.6、Opera7.53、Opera9.0、Netscape7.2、Camino、IE5.2.3できちんと色付き表示枠のボックス内で折り返しが入ります。
(すみません今Macでログインしてるんで・・・^^;
旧バージョンとの互換の為に複雑な記述にされているのかもしれませんが、質問者様が書かれたやり方では、Mac側のブラウザではSafariのみが折り返して表示されていますね。
No.2
- 回答日時:
いえ、<pre>タグはそのままで、CSS内のwhite-spaceプロパティに適用するpreの値をnormalに変えるとFirefoxでもボックス内で自動改行されるはずです。
このやり方では、不都合が出てしまいますか?
この回答への補足
たびたびありがとうございます。
以下のようにやってみたのですが、やはりfirefoxでは自動改行されませんでした。
pre {
white-space: -moz-normal-wrap; /* Mozilla */
white-space: -normal-wrap; /* Opera 4-6 */
white-space: -o-normal-wrap; /* Opera 7 */
white-space: normal-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
No.1
- 回答日時:
そもそもwhite-spaceプロパティは、ブラウザによって対応が違うので、IEが正常でFirefoxがおかしいという事ではありませんが・・・・^^;
後、W3C標準と互換で表示が変わります。
記述をぱっと見た感じでは互換モードでIEがpreの値が適用されている時にうまく表示出来ない不具合を正常と勘違いされている感じがします。
preの代わりにnormalを適用すればFirefoxでもボックス内で折り返してくるはずですが。
この回答への補足
ご回答ありがとうございます。
>preの代わりにnormalを適用すればFirefoxでもボックス内で折り返してくるはずですが。
説明不足でした。すみません。
<pre>を使いたい理由は、<textarea>で入力した内容を改行も含めてそのまま表示したかったからなのです。改行コードを<br>に変換すればいいのですが、タグを入力された場合は、内部処理でタグを無効にしているので、その方法も使えないという状況なのです^_^;
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
<h1>タグの後の行間を詰めたい。
-
text-alignの解除の方法
-
aタグに直接style=""で:hoverを...
-
HTMLフォームのSELECTの幅を一...
-
cssで body{margin: 0 0 0 0;}...
-
インラインフレームの表示位置...
-
エクセルでサイズに合ったもの...
-
PDFへてのテキストボックスにて...
-
オープンオフィス ライターの文...
-
Excel で等間隔で縦線を引きた...
-
TD、THタグ内の水平罫線(...
-
<tbody>は何のためにあるんでし...
-
サブウインドウを開くときのフ...
-
パソコンでランドルト環の作成...
-
Excelで5×8cmの表を作る方法
-
word,excelで、cm...
-
小さいオーブンレンジを探して...
-
Excel セルの幅が合わない
-
Excelで可視部分だけをWeb形式...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
インラインフレームの表示位置...
-
text-alignの解除の方法
-
端から端まで横線を引きたい
-
Formタグのブロックの高さについて
-
なぜ左に寄っているの?
-
macとwindowsのレイアウト崩れ...
-
CSSの設定
-
外部CSSがFireFoxで反映されません
-
FireFoxで見るとブラウザの幅に...
-
<legend>で表示されるタイトル...
-
INPUT TEXT内の文字位置を指定...
-
作成したホームページの自動改...
-
CSSでh1とその下の文字との行間...
-
ホームページビルダー 空白の...
-
Dreamweaverで画面サイズを一定...
-
htmlのタグ間の謎の空白
おすすめ情報