人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

<table>
<td width="200">
<pre>hogehoge</pre>
</td>
</table>

のようにwidthで幅をしていしていても、preで囲まれた部分が広いと、それに従ってテーブルも広がってしまいます。
ちなみにpreを外すと指定した幅に収まるよう、自動的にテキストが改行されます。

preの中には改行コード等を入れるので、preは使いたいと思います。しかし、幅も固定しておきたいのですが、いい方法はないでしょうか。

●質問者: tono5652
●カテゴリ:インターネット ウェブ制作
✍キーワード:コード テキスト 自動
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● GoldenDawn
●50ポイント

あんまりうまい手は思いつきませんが……

1) CGI や PHP で改行を <br /> に変換する

2) CSS と JavaScript を使う

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <style type="text/css">
 pre { word-wrap : break-word ; word-break : break-all ; } /* for IE */
 </style>

 <script type="text/javascript">
 onload = function() {
 if (navigator.appVersion.indexOf('MSIE') < 0) { // IE 以外
 var pres = document.getElementsByTagName('pre') ;
 for (var i = 0; i < pres.length; ++i) {
 pres[i].style.whiteSpace = 'normal' ;
 pres[i].innerHTML = pres[i].innerHTML.replace(/[\n]/g, '<br />') ;
 }
 }
 }
 </script>
 </head>

 <body>
 <table><td width=100><pre>
吾輩は猫である。



名前はまだ無い。
どこで生まれたか頓と見當がつかぬ。(Firefoxはここにスペースが必要→) </pre></td></table>
 </body>
</html>

ただ、こちらの方法ではなぜか Firefox だと </pre> の前にスペースがないと white-space に normal が適用されないようです。

◎質問者からの返答

ありがとうございます。助かりました!


2 ● wen000
●20ポイント

CSSで

word-break:break-all;

と指定してみては。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ