1

私は自分自身で作成したプロジェクト (www.deepsecurity.org) に取り組んでおり、人々は将来、さまざまなものを貼り付けることができるようになります。

このプロジェクトには問題がありますが、サイトをチェックして誰かが投稿した「Th Bible」の貼り付けを確認すると、投稿が黒い画面から消えて残りを読むことができなくなっていることがはっきりとわかります。

どうすればこれを修正できますか? 何時間も試しています。

Flask + SQLAlchemy + WTForms と Pygments を使用しています。

css を見てみましょう (私は非常に後ろの css を書いています。申し訳ありません)。

スタイル.css

@import url('topbar_style.css');
@import url('errors.css');
@import url('showcodes.css');
@import url('addcode.css');
@import url('highlight.css');
@import url('about.css');
@import url('login.css');

html {
    font-family: 'Lucida Console', Monaco, monospace;
    font-size: 13px;
    color: #FFFFFF;
    background: #F2F2F2 url('images/bg_body.png') repeat-x 0 0;
    display: inline-block
}

.page {
    overflow: hidden;
    margin: 3em auto;
    width: 950px;
    display: inline-block
    border: 5px solid #ccc;
    padding: 0.8em;
    border: 1px solid #383838;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #202020;
}

div.codes h1 {
    font-family: 'Lucida Console', Monaco, monospace;
    margin: 0px;
    color: #F2F2F2;
    border-bottom: 2px solid #eee;
}

h2 { 
    font-size: 15px;
}

div.about-text { 
    white-space: pre; 
}

div.codes {
    white-space: pre;
}

showcodes.css

.codes {
    display: inline;
    list-style: none; 
    margin: 0; 
    padding: 0;
}

.codes li { 
    margin: 0.2em 1em;
}

教えていただいた内容を変更したらこうなりました

4

4 に答える 4

2

さて、このページには2つの問題があります。

  1. style.css、44行目、

    div.codes {
    white-space: pre;
}

    それを削除します。

  2. ページの「聖書」の部分には、貼り付けに<code><pre>タグがあります。これにより、基本的にテキストが「フォーマットされていない」状態になります。http://reference.sitepoint.com/html/pre すべてのコード/pre要素をdivに変更できます。またはp、またはこの行をcssファイルに追加するだけです。

    code {
    white-space: normal;
}

問題が解決しました！

于 2012-07-03T20:43:24.650 に答える
1

これは、空白のCSS宣言が原因です。これを修正するには、次を使用します。

.codes code { 
    white-space:pre-wrap; 
}

これにより、事前にフォーマットされたテキストはそのまま保持されますが、強制的に折り返されます。

于 2012-07-03T20:48:16.690 に答える
0

  1. divの外にある残りのテキストは、次の理由で読むことができません。

    .page {
 overflow: hidden;
}

  2. そして、それらのくそったれのpreタグのためにそれはラッピングしていません。それらを削除します。

  3. また、変更します

    div.codes {
 white-space: pre;
}

に

   div.codes {
    white-space: normal;
   }
于 2012-07-03T21:03:43.183 に答える
0

これは、空白：preが事前にフォーマットされた改行のみに続くためだと思います。空白：normalに変更してください。

于 2012-07-03T20:44:06.360 に答える