CSS没有扩展？

Question

我正在创建一个我自己创建的项目（www.deepsecurity.org），人们将来可以粘贴其他内容。

我对这个项目有一个问题，如果你查看网站并查看某人发布的“Th Bible”粘贴，你可以清楚地看到帖子从黑屏中消失，你再也看不到剩下的了。

我该如何解决这个问题？一直试着好几个小时。

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

看一下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 你可以将所有代码/ 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;
   }