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

Question

我正在尝试使用 prettify 和 css 自定义设置我的 tumblr 主题以显示 python 代码片段。我是 css 的新手，但我现在几乎可以正常工作(感谢在网上搜索示例)。但是，文本太长时会换行，我无法弄清楚如何让它只显示滚动条。

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

这是我现在正在使用的。我发现一些页面说我想添加 white-space: 到这里，但是在完成所有选项之后，它们似乎都不起作用。选项 nowrap 使得它没有任何换行符。

如果我添加 width: 2000px 或更大的东西，它会阻止文本换行，但它会被写在所有内容之上，并且不会出现滚动条。

感谢您的帮助。

Answer 1

为了让它与着色语法一起工作。

转到:自定义 > 自定义主题(编辑 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>