Oracle中心にIT全般の技術情報を気が向くままに書いています。他にLinux、仮想化技術(VMWare)やトラブルに役立つ情報などがあります。

スポンサーサイトソースのブログ表示やコマンド実行結果表示について


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
当ブログではコマンドを実行しその結果をそのまま掲載することが多い為,実行結果をそのまま貼り付けできるのが好ましいですが,HTMLの場合,改行には
を入れるなどをしなければならないので,非常に面倒です。

楽にコピー&ペースとするためにいくつか実験してみたのでその結果を掲載したいと思います。

1.失敗例その1
 最初は
タグにスタイルシートで「white-space: pre」を指定していましたが,文字列が長い場合に右端で自動改行をしてくれません。
また、表示内容をコピーしてノートパッドなどに貼り付けた場合に,IE7とFireFox10で改行が無視されて1行で貼り付けられてしまいました。

長ーーー(省略)ーーーい文字列


CODE1

2.解決策その1
 本ブログでは検討の結果採用しませんでしたが、有効な場合も多いので一応記載しておきます。
 
タグにスタイルシートで「overflow: auto」を追加して,文字列が長い場合は横スクロールバーを出すようにします。
 しかし,文章によってはIE7の場合に変な解釈で縦スクロールが出る場合があったり,見づらいというのもあるので本ブログではこの方式は採用しませんでした。

長ーーー(省略)ーーーい文字列
 


CODE2

3.解決策その2
 本ブログで採用した方法について説明したいと思います。

まずwhite-space:preは使用せずに
タグを利用します。

長ーーー(省略)ーーーい文字列


スタイルシートに下記を指定します。

pre {
white-space: pre-wrap; /* css-3 */    
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */    
white-space: -pre-wrap; /* Opera 4-6 */    
white-space: -o-pre-wrap; /* Opera 7 */    
word-wrap: break-word; /* Internet Explorer 5.5+ */    
font-family: monospace;
}


※参考1:Wrapping Text Inside Pre Tags


 また,文字の位置を揃える為にフォントを固定幅フォントで指定します。

pre {
white-space: pre-wrap; /* css-3 */    
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */    
white-space: -pre-wrap; /* Opera 4-6 */    
white-space: -o-pre-wrap; /* Opera 7 */    
word-wrap: break-word; /* Internet Explorer 5.5+ */    
font-family: monospace;
}

※参考2:pre記法のフォントを等幅に変更

CODE3

これでほぼOKなのですが、固定フォント指定なのにIE7の場合に文字の開始位置がずれて表示されてしまいます。
もしかしたらIEの他のバージョンでも同様かもしれません。

■ IE7の場合
CODE4

上記の症状については解決できませんでしたが,これで良しとしたいと思います。



関連リンク
はてなダイアリーとかpre要素内でコードがはみ出ている人は
preとblockquoteのスタイル変更
アメブロ・preタグとcssで本文中にソースコードをきれいに表示
[CSS]スーパーpre表記ではみ出した部分をスクロールにする



以上です。




トラックバックURL

この記事にトラックバックする(FC2ブログユーザー)



前ページへ:忍者ブログからFC2ブログへ引越しについて
次ページへ:FC2ブログでPREタグを使用する場合の落とし穴(自動改行)

ページのトップへ

必ずお読みください

本ブログ記事をご利用になって生じたいかなる損害についても当方は一切責任を負いません。
ご利用は自己責任でお願いします。(^―^)

広 告





ブログランキング/その他


ビジネスブログ100選

ブログランキング・にほんブログ村へ
blogramで人気ブログを分析




最新トラックバック


RSSリンクの表示

QRコード

QR

アクセスカウンター

ユニーク:
トータル:


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。