![[PukiWiki-official]](image/pukiwiki-official.png "[PukiWiki-official]")
| カテゴリ | |
|---|---|
| サマリ | 整形済みテキストのせいで横スクロールがでないように |
| バージョン | 1.4.3 |
| 投稿者 | koedame |
| 状態 | 完了 |
| 投稿日 | 2004-07-02 (FRI) 13:45:00 |
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 のように任意の場所で改行（空白文字ではなく）させるようにすることはやはり無理でしょうか？ よろしくお願いします。
僕もいろいろ試して上手くいきませんでしたが、この設定で上手くいった：
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 のボックスの幅も自動的に調節する方法はどうやったらできるのでしょうか。
スキンを table レイアウトから div float レイアウトに変えたら横スクロールがでなくなりました。そういうものなのですかね？よくわかっていなかったので書くのをためらっていました。
kodame さんの言うとおりだと思います。さっきもう 一つのやり方を思い出して、pre の親要素には max-width:xxyy; のように設定さ れていてたら pre 自身の幅は % で設定できると思います。
今スキンを改造中なので、検証結果が出来たらまた知らせます。
> word-wrap:break-word; > word-break:break-all; > overflow:auto;pukiwiki.skin.ja.php に、$body を含テーブルを固定広さに
< <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; の設定などは不要となります。 -- バイズ 2004-11-22 (月) 15:53:26
|
Site admin: PukiWiki Development Team
PukiWiki 1.5.4+ © 2001-2022 PukiWiki Development Team. Powered by PHP 8.2.12. HTML convert time: 0.322 sec. |
|