CSS没有扩展？

Question

我正在开发一个我自己创建的项目 (www.deepsecurity.org)，未来人们将能够粘贴内容等等。

我对这个项目有一个问题，如果你检查网站并检查某人发布的“Th Bible”粘贴，你可以清楚地看到帖子退出黑屏，你无法再阅读其余部分。

我该如何解决这个问题？已经尝试了几个小时。

我正在使用 Flask + SQLAlchemy + WTForms 和 Pygments。

看一下css（我写的很后面的css，对此感到抱歉）

style.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;
}

Answer 1

好的，所以，你在这个页面有两个问题：

1. style.css，第 44 行，

   div.codes {
       white-space: pre;
   }
   

   删除那个。

2. 在页面的“圣经”部分，粘贴有<code><pre>标签，基本上强制文本为“无格式”http://reference.sitepoint.com/html/pre 您可以将所有代码/预元素更改为 div 或 p，或者您可以简单地将这一行添加到您的 css 文件中：

   code {
       white-space: normal;
   }
   

问题解决了！

Answer 2

这是因为空白 CSS 声明。要修复它，请使用以下内容：

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

这将使预先格式化的文本保持原样，但强制它换行。

Answer 3

我相信这是因为 white-space: pre 只遵循预先格式化的换行符，将其更改为 white-space: normal;

Answer 4

1. 由于

   ，您无法阅读 div 之外的其余文本

   .page {
    overflow: hidden;
   }
   

2. 因为那些该死的pre 标签，它没有换行。删除它们。

3. 还有，改变

   div.codes {
    white-space: pre;
   }
   

到

   div.codes {
    white-space: normal;
   }