Css 用于在tumblr上显示代码段的水平滚动区域

我正在尝试使用prettify和css定制来设置tumblr主题，以显示python代码片段。我对css是全新的，但我现在几乎可以随心所欲地使用它（多亏了浏览网页上的例子）。但是，文本太长时会被换行，我无法找到如何让它只显示一个滚动条

        pre code {
            overflow-x: scroll;
            overflow-y: hidden;
            display: block;
            line-height: 1.6em;
        font-size: 11px;
        }

这是我现在正在使用的。我发现一些页面说我想在这里添加空白，但在浏览了所有选项后，它们似乎都不起作用。nowrap选项使其成为一个选项，因此不存在任何换行符

如果我加上width:2000px或其他大的东西，它会阻止文本的包装，但它会被写在所有内容的顶部，并且不会出现滚动条

---

感谢您的帮助。

为了让它能够使用着色语法

转到：自定义>自定义主题（编辑HTML）
在HTML模板代码中，在head标记之前添加以下内容：

<style type="text/css" media="screen">

    pre code {
        overflow-x: scroll;
        overflow-y: hidden;
        display: block;
        line-height: 1.6em;
        font-size: 11px;
        white-space: pre; 
        word-wrap: normal;
    }
</style>

<!-- For Syntax Highlighting -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"></link>  
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>  
<script>
    function styleCode() {
        if (typeof disableStyleCode != 'undefined') { return; }

        var a = false;

        $('code').each(function() {
            if (!$(this).hasClass('prettyprint')) {
                $(this).addClass('prettyprint');
                a = true;
            }
        });

        if (a) { prettyPrint(); } 
    }

    $(function() {styleCode();});
</script>

前置码{
溢出-x：滚动；
溢出y：隐藏；
显示：块；
线高：1.6em；
字体大小：11px；
空白：预处理；
换字：正常；
}
函数styleCode（）{
if（typeof disableStyleCode！=“undefined”）{return；}
var a=假；
$（'code'）。每个（函数（）{
if（！$（this）.hasClass（'prettyprint'））{
$（this.addClass（'prettyprint'）；
a=真；
}
});
如果（a）{prettyPrint（）；}
}
$（函数（）{styleCode（）；}）；

您确定您的HTML是正确的吗？也就是说，您有

。因为这对我来说很有效…很确定。代码片段正在通过prettify成功格式化。有趣的是，它实际上正在那个页面上工作。我想知道tumblr主题是否以某种方式覆盖了该行为。我注意到该页面上的代码与主题中的代码之间的一个区别是，在任何地方都没有设置容器。不确定这是否有什么不同。我还应该提到，我仍然只是设置为默认的tumblr主题Optica。啊，好的，这就是我认为的主题。我刚刚预览了主题并测试了添加HTML。在CSS中，尝试添加：

空白：pre；换字：正常。完美！谢谢我永远不会得到这个。现在就得看看这个组合有什么特别之处。非常感谢@MikeSamuel with
wrap:normal
和
white space:pre
文本仅在内容中出现换行时才会换行。使用
wordwrap:break-word
和
white-space:pre
时，行为似乎与
break-word
和
pre-wrap
组合相同。我把它们都列在这里了。