テキストを極力そのまま表示し、かつ画面端で折り返したい

質問

テキストファイルの内容をページ上の一画に表示したいのですが、次のようなことはできないものでしょうか？
１．タブやスペースは詰めずに表示したい。
２．行が長すぎると読みにくいので、画面端で折り返して欲しい。

条件１から、真っ先にpreタグの使用を思いついたのですが、preタグでは画面端で自動改行されません。

それではと、divタグにfont-family:monospaceを指定したのですが、自動改行はされるものの、今度はタブやスペースが詰められてしまうようです。

スタイルシートを使えばどうにかならないものかと調べてみたのですが、preタグを自動改行させたり、divタグなどでタブやスペースを詰めずに表示するためのものは見つけられませんでした。

そのようなスタイルシート、またはこれらに変わる方法をご存知でしたら、ぜひご教授ください。
よろしくお願いいたします。

回答No.1

elttac · ベストアンサー

テキストの前処理がよいかと思われます。

　HTML では，「つぶされない半角スペース」として，  があります。これを使って，そのテキストに対して，
　　- 半角スペースは   1 個に置換
　　- タブ文字を   複数個に置換
と処理します。

　それで，font-family: monospace; は，フォントに対する指定なので，スペースの扱いには効いてきません。
　また，空白と改行を操作する CSS のプロパティには white-space がありますが，この値としては，

normal：複数の空白文字を詰め，折り返す
nowrap：複数の空白文字を詰めるが，折り返しはしない
pre：複数の空白文字は保持し，折り返しもしない

があります。「複数の空白文字を保持し，折り返しをする」は，残念ながら今のところ値としてありません。

　以上，ご参考になりますれば幸いです。

お礼

やはりスタイルシートだけでは無理ですか・・・
空白を に置換するとページサイズが非常に大きくなってしまうことがあるので、もう少し他の案を模索、及び回答を待ってみたいと思います。
どうもありがとうございました。