2

pre要素に次のスタイルを適用しました。

pre {
     background-color: #FFFFCC;
     border: 2px dashed #FF6666;
     padding-top: 7px;
     padding-bottom: 8px;
     padding-left: 10px;
     float: none;
     padding-right: 10px;
     margin: 10px;
    }

テキストがボックスからはみ出します。プロパティを適用するとfloat:right、ボックスは期待どおりに動作しましたが、大画面では、残りは自然にボックスの周りに浮かんでいました。満足していない。EDIT2：float + clearを使用して作成しました（ただし、ie6の場合）。新しいバグに関する別の質問を投稿しました

私は CSS と HTML を初めて使用します。簡単な解決策があると確信しています。助けてください。:(

編集：マークに近い：

pre {
     background-color: #FFFFCC;
     border: 2px dashed #FF6666;
     padding-top: 7px;
     padding-bottom: 8px;
     padding-left: 10px;
     padding-right: 10px;
     margin: 10px;
     white-space: pre-wrap;
    }

これは、ie6 で必要なとおりに表示されます - ff 3.5 では、テキストが折り返されます - これが本来あるべき方法であることはわかっていますが、 ie の動作を ff に運ぶにはどうすればよいですか?

スタイル付きプレタグの画像white-space: pre;

ie6 : https://i1032.photobucket.com/albums/a406/dardanov/ie6pre.jpg

ff 3.5 :https://i1032.photobucket.com/albums/a406/dardanov/ff35pre.jpg

white-space: pre-wrap;firefox ラップの場合、つまり同じままです。ff で ie 動作 (コード ボックスの自動拡張) を取得するにはどうすればよいですか?

EDIT2：以下の回答を参照してください

4

4 に答える 4

3

私があなたの質問を正しく読んでいるなら、あなたはボックスに含まれているコード/テキストを表示したいと思っています、そしてそのコードは折り返すことができません（そのような折り返し、またはキャリッジリターン/ラインフィードなどがコード/テキスト自体に存在しない限り） 。また、テキスト/コードの必要な幅に拡張するために、包含要素の水平方向の寸法を大きくする必要がありますか？

したがって、テキストの最長行が<pre>20文字の場合、幅は少なくとも20文字になります。テキストの最長行が200文字の場合、200文字に対応するように拡張する必要がありますか？

これらの仮定が正しければ、子要素の幅に基づいて親の幅を設定する必要があるため、少なくともjavascriptなしでは実行できません。残念ながら、CSSはDOMをカスケードし、一方向にのみカスケードします。

JSなしでできる最善のことは、次を追加することです。

overflow: scroll; /* or auto */

また：

overflow-x: scroll;

CSSに追加します。これにより、の幅が維持されます<pre>が、スクロールして最長の行を折り返さないようにすることができます。

私があなたの質問を誤解した場合は、コメントを提出してください。私はあなたの質問にもっと役立つように対処するためにできることをします。

于 2010-02-26T00:50:11.283 に答える
1

セミコロンの問題以外に、pre タグが行う重要なことの 1 つは、CSSの空白のプロパティを「nowrap」(または「pre」だと思いますが、混乱を招くだけです) に設定することです。そのような動作を止めたい場合は、「nowrap: normal;」を設定します。ただし、これにより、 pre 要素が意図したとおりに機能するのではなく、他のすべての要素と同じように機能するようになり、一緒に作業している他の人を混乱させる可能性があります。div 要素を使用しないのはなぜですか? 何を達成しようとしていますか？

于 2010-02-25T21:05:22.783 に答える
0

私はそれを作りました（ff 3.5、オペラ10、ie8はありますが、ie6はありません（ie7はテストされていません））

以下に示すように、さまざまなセクションを div タグでラップしました。ie6 では、div は小さな幅で表示されます (h3 タグが含まれている場合)。pre タグは影響を受けません。他のブラウザでは、div はページとともに縮小しますが、pre タグも影響を受けません。私が抱えているもう 1 つの小さな問題は、pre タグに右マージンが表示されないことです。これらについて別の質問を投稿しました

したがって、htmlの構造は次のとおりです。

<html>
 <head></head>
 <body>
  <div>...</div>   //this div is ok in ie
  <div><h3>Title...</h3>...</div>    //this div is shrunken
  ...
  <div><h3>Title...</h3>...</div>    //this div is shrunken
  <pre></pre>
  <div><h3>Title...</h3>...</div>    //this div is shrunken
  ...
  <div><h3>Title...</h3>...</div>    //this div is shrunken
 </body>
<html>

スタイル:

pre {
    background-color: #FFFFCC;
    border: 2px dashed #FF6666;
    padding-top: 7px;
    padding-bottom: 8px;
    padding-left: 10px;
    margin: 10px;
    float: left;
    padding-right: 10px;
    clear: both;
}
div {
    float: left;
    clear: both;
}
于 2013-12-10T15:54:29.893 に答える
0 
    white-space: pre-wrap;

これをcssに追加するだけです

于 2021-03-23T15:28:21.303 に答える