pre {
white-space: pre;
white-space: pre-wrap;
/* white-space: pre-line; */
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: -moz-pre-wrap;
white-space: -hp-pre-wrap;
word-wrap: break-word;
}
PRE 要素内では、改行コードが改行として表現されます。しかし、white-space の pre-line を指定すると『連続する半角スペース・タブ・改行を、1つの半角スペースとして表示』するので、連続する二行の改行が存在する場合どうなるか・・・という事なんですが。 Google Chrome をメインに使っていたので これで何が問題なのか気が付かなかったのですが、Google Chrome ですと、改行の数がそのままになって、Firefox だと、改行がなくなるようなのです。で、IE はと言うと、Google Chrome に近い結果なのですが、他のパターンだと Firefox と似ている・・・という良く解らない事実に遭遇してしまいました。 結果的に、それぞれレイアウトが違う もともとは、pre 内の文字列を自動改行する為に使った CSS の一部だったのですが、全てのブラウザで確認しなかった為にかなり長い間放置していた事になります。 PRE で改行を含めて文字列を配置しておくと、自分にとってはいろいろいい事があるので、昔から使っていたのですが(自分で改行位置を決めていた)、スマホに対応するのに『自動改行』が必要になりました。で、インターネットで調べて Google Chrome でテストしてうまくいったのでそのまま・・・という事です。 ※ DIV 内で改行を BR にまかせている場合は発生しないと思います。
|
|
【HTML / CSSの最新記事】
- タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する
- A 要素と CSS だけでボタンを表現する 『BUTTONS』
- BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』
- CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い
- INPUT type="number" の振る舞いをブラウザ間で調整する
- META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。
- CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認
- ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ
- IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol
- TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する
- HTML : 画像を使ったボタンのバリエーション
- Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する
- WEB フォントの記述方法の考察
- これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整
- Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。
- CSS3 の角丸を IE8以前でも使うには( ブログで使うには )
- CSS : display / vertical-align
