テキストファイルの内容をページ上の一画に表示したいのですが、次のようなことはできないものでしょうか?
1.タブやスペースは詰めずに表示したい。
2.行が長すぎると読みにくいので、画面端で折り返して欲しい。
条件1から、真っ先にpreタグの使用を思いついたのですが、preタグでは画面端で自動改行されません。
それではと、divタグにfont-family:monospaceを指定したのですが、自動改行はされるものの、今度はタブやスペースが詰められてしまうようです。
スタイルシートを使えばどうにかならないものかと調べてみたのですが、preタグを自動改行させたり、divタグなどでタブやスペースを詰めずに表示するためのものは見つけられませんでした。
そのようなスタイルシート、またはこれらに変わる方法をご存知でしたら、ぜひご教授ください。
よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
テキストの前処理がよいかと思われます。
HTML では,「つぶされない半角スペース」として, があります。これを使って,そのテキストに対して,
- 半角スペースは 1 個に置換
- タブ文字を 複数個に置換
と処理します。
それで,font-family: monospace; は,フォントに対する指定なので,スペースの扱いには効いてきません。
また,空白と改行を操作する CSS のプロパティには white-space がありますが,この値としては,
normal:複数の空白文字を詰め,折り返す
nowrap:複数の空白文字を詰めるが,折り返しはしない
pre:複数の空白文字は保持し,折り返しもしない
があります。「複数の空白文字を保持し,折り返しをする」は,残念ながら今のところ値としてありません。
以上,ご参考になりますれば幸いです。
やはりスタイルシートだけでは無理ですか・・・
空白を に置換するとページサイズが非常に大きくなってしまうことがあるので、もう少し他の案を模索、及び回答を待ってみたいと思います。
どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
- ホームページ作成・プログラミング アメーバ・ブログは"HTMLタグ"を許可してないのですか? 2 2023/06/17 21:08
- Visual Basic(VBA) VBAにてメール作成した際、一部指定箇所のみ赤文字にしたいです。 下記の内容ですと作成されたメール本 1 2022/04/27 13:31
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- WordPress(ワードプレス) WordpressでYouTubeの埋め込みができない。 1 2022/10/26 01:08
- HTML・CSS HPに文章で改行はすべてBRタグとかで改行しなきゃだめなのですか?改行が活きたまま書く方法ないの? 1 2022/12/03 21:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストエリア内の改行禁止
-
Windowsのformでtextareaに入力...
-
ブラウザでのタイ語の改行について
-
アコーディオン仕様の中の ul l...
-
テーブルの幅を固定するとnowra...
-
長いURLを途中で改行(折り返す...
-
シェルで特定の文字が消える
-
preタグがプロの現場であまり使...
-
H1タグに改行の<br>を使う
-
改行できる・できない入力ボッ...
-
<br />タグの、brの後の半角ス...
-
<PRE>~</PRE>の最後を改行しない
-
「:」について
-
<br style="clear:both;">って...
-
テキストエディタで文字列を揃える
-
HTMLソースの質問
-
Dreamweaverの改行コードをLFに...
-
文字の最後に半角空白が勝手に...
-
<a href="長いURL"> を途中で...
-
Eclipseでタブや改行マークの色...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テキストエリア内の改行禁止
-
H1タグに改行の<br>を使う
-
テーブルのセルデータを自動改...
-
長いURLを途中で改行(折り返す...
-
テーブルの幅を固定するとnowra...
-
改行できる・できない入力ボッ...
-
\\n \\r \\t について
-
テーブル内の文字列を改行させたい
-
preタグがプロの現場であまり使...
-
テキストエリア内の改行もその...
-
「:」について
-
PCの画面を縮小したらサイズ...
-
htmlで文字列をクリップボード...
-
<br />タグの、brの後の半角ス...
-
<TD><input type="text"></TD>...
-
XMLの改行方法とリンクの仕方
-
html上で改行するとスペースが...
-
<br style="clear:both;">って...
-
mailtoで本文に改行を入れたい
-
文章改行で出来る半角スペース...
おすすめ情報