質問箱/2244 の履歴ソース(No.4)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• 質問箱/2244 へ行く。
  • 1 (2004-08-21 (土) 01:00:25)
  • 2 (2004-11-03 (水) 22:39:54)
  • 3 (2004-11-22 (月) 17:24:16)
  • 4 (2004-11-24 (水) 13:55:47)
  • 5 (2004-11-25 (木) 16:14:45)
  • 6 (2006-07-26 (水) 05:44:55)

**[[続・質問箱/244]] [#z60a76e5]
|RIGHT:70|LEFT:410|c
|~サマリ|整形済みテキストのせいで横スクロールがでないように|
|~バージョン|1.4.3|
|~投稿者|[[koedame]]|
|~状態|質問|
|~投稿日|&new{2004-07-02 (FRI) 13:45:00};|
***質問 [#w9ac9276]
pukiwiki.org のように整形済みテキストのせいで横スクロールがでないようにしたいのですが、どのようにすればよいのでしょうか？
skin/default.ja.css 中に
 pre
 {
 	white-space:-pre-wrap;
 	white-space:-moz-pre-wrap;
 }
skin/ie5.ja.css 中に
 pre
 {
 	line-break:strict;
 	word-break:break-all;
 	word-wrap:break-word;
 }
とあったので追加してみましたが、
IE のときにどうもうまく行きませんでした。
mozilla, opera では確かに空白文字があれば改行してくれていました。

IE のとき、ほかにも何か必要なのでしょうか？
また、mozilla, opera のときに IE のように任意の場所で改行（空白文字ではなく）させるようにすることはやはり無理でしょうか？
よろしくお願いします。

***回答 [#ce8795d7]
-[[バイズ]] &new{2004-08-10 (TUE) 18:12:47};
~僕もいろいろ試して上手くいきませんでしたが、この設定で上手くいった：
 pre
 {
 	line-height:130%;
 	width:80ex;
 	max-width:80ex;
 	line-break:strict;
 	word-wrap:break-word; /* IE対策 */
 	word-break:break-all; /* IE対策 */
 	overflow:hidden; /* Moziila/Opera対策 */
 }
これは[[質問箱/173]]を見て変更しました。CSS についてよく分からないので、正しい設定になっているかどうかは分かりませんが、一応 warp させました。
~ちなみに、PukiWiki 本家のようにブラウザの大きさを変えたら pre のボックスの幅も自動的に調節する方法はどうやったらできるのでしょうか。
-[[koedame]] &new{2004-08-10 (TUE) 22:03:44};
~スキンを table レイアウトから div float レイアウトに変えたら横スクロールがでなくなりました。そういうものなのですかね？よくわかっていなかったので書くのをためらっていました。
-[[バイズ]] &new{2004-08-11 (WED) 02:09:51};
~&color(white,blue){kodame さん};の言うとおりだと思います。さっきもう
一つのやり方を思い出して、pre の親要素には max-width:xxyy; のように設定さ
れていてたら pre 自身の幅は % で設定できると思います。
~今スキンを改造中なので、検証結果が出来たらまた知らせます。
-私もpreタグで悩んでいます。バイズさんの紹介されている方法は有効ですね。 -- [[ありぃ]] &new{2004-11-03 (水) 21:53:59};
--「word-wrap:break-word;」「word-break:break-all;」を指定する方法。親要素のwidthプロパティを指定することが必要です。
---div要素によるレイアウトの場合：%による指定も、pxによる指定も有効のようです。
---tableによるレイアウトの場合：一応できるのですが、3段組がうまくいかないんですよね～（IE6）。やりかたがまずいのかなぁ。
-max-widthは、IEには効きません。widthプロパティで指定すると良いです。 -- [[ありぃ]] &new{2004-11-03 (水) 22:39:54};
-新しいやり方を見つけましたのでお知らせ致します。&br;''default.ja.css の pre に対し wrap させるように''&br;'''98a99,101'''
 > 	word-wrap:break-word;
 > 	word-break:break-all;
 > 	overflow:auto;
''pukiwiki.skin.ja.php に、$body を含テーブルを固定広さに''&br;
'''114c138'''
 < <table border="0" style="width:100%">
 ---
 > <table border="0" style="width:100%; table-layout: fixed;">
'''127c151,157'''
 < <div id="body"><?php echo $body ?></div>
 ---
 > <table border="0" style="width:100%; table-layout: fixed;">
 >  <tr>
 >   <td valign="top">
 >    <div id="body"><?php echo $body ?></div>
 >   </td>
 >  </tr>
 > </table>
これで長い整形済み行でも IE では wrap してくれる。Mozilla では横のスクロールバーが使えるようになります。max-width:80ex; の設定などは不要となります。 -- [[バイズ]] &new{2004-11-22 (月) 15:53:26};
--- Operaでは だめかも > table-layout -- [[merlin]] &new{2004-11-22 (月) 17:24:16};
---ただ今 Opera 7.54 で確認しましたが、問題ないようですよ。表示は Mozilla のように wrap せずスクロールバーが表示されます。 -- [[バイズ]] &new{2004-11-24 (水) 13:55:47};

#comment