質問箱/2244

カテゴリ
サマリ整形済みテキストのせいで横スクロールがでないように
バージョン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 のように任意の場所で改行(空白文字ではなく)させるようにすることはやはり無理でしょうか? よろしくお願いします。

回答

  • バイズ? 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? 2004-08-10 (TUE) 22:03:44

    スキンを table レイアウトから div float レイアウトに変えたら横スクロールがでなくなりました。そういうものなのですかね?よくわかっていなかったので書くのをためらっていました。

  • バイズ? 2004-08-11 (WED) 02:09:51

    kodame さんの言うとおりだと思います。さっきもう 一つのやり方を思い出して、pre の親要素には max-width:xxyy; のように設定さ れていてたら pre 自身の幅は % で設定できると思います。

    今スキンを改造中なので、検証結果が出来たらまた知らせます。

  • 私もpreタグで悩んでいます。バイズさんの紹介されている方法は有効ですね。 -- ありぃ 2004-11-03 (水) 21:53:59
    • 「word-wrap:break-word;」「word-break:break-all;」を指定する方法。親要素のwidthプロパティを指定することが必要です。
      • div要素によるレイアウトの場合:%による指定も、pxによる指定も有効のようです。
      • tableによるレイアウトの場合:一応できるのですが、3段組がうまくいかないんですよね~(IE6)。やりかたがまずいのかなぁ。
  • max-widthは、IEには効きません。widthプロパティで指定すると良いです。 -- ありぃ 2004-11-03 (水) 22:39:54
  • 新しいやり方を見つけましたのでお知らせ致します。
    default.ja.css の pre に対し wrap させるように
    98a99,101
    > 	word-wrap:break-word;
    > 	word-break:break-all;
    > 	overflow:auto;
    pukiwiki.skin.ja.php に、$body を含テーブルを固定広さに
    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; の設定などは不要となります。 -- バイズ? 2004-11-22 (月) 15:53:26
    • Operaでは だめかも > table-layout -- merlin 2004-11-22 (月) 17:24:16
    • ただ今 Opera 7.54 で確認しましたが、問題ないようですよ。表示は Mozilla のように wrap せずスクロールバーが表示されます。 -- バイズ? 2004-11-24 (水) 13:55:47


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2006-07-26 (水) 05:44:55
Site admin: PukiWiki Development Team

PukiWiki 1.5.2+ © 2001-2019 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u7. HTML convert time: 0.245 sec.

OSDN