Question

我有一个特定大小的div（300px乘300px）。 div内部是一个pre标记，其中包含一段源代码。片段可以是任意大小。我尝试设置div和pre标记的样式，以便除非有换行符，否则源代码不会水平换行。如果有溢出，则应该不可见，并且应显示滚动条。这应该适用于水平和垂直溢出。

到目前为止，我有一个垂直滚动条，但文本被水平包裹。这是css（主要是从StackOverflow的代码格式中复制而来）：

pre {
    max-height: none\9;
    padding: 5px;
    font-family: Consolas, Monaco;
    margin-bottom: 10px;
    overflow: auto;
    text-overflow: clip;
    width: 300px;
    height: 300px;
}

这里是html的一个例子：

<div class="item" data-handle=".snippetHeader">

<h5 class="snippetHeader">Snippet7</h5>

<div class="code">
    <pre>
        <code>

DWORD WINAPI ValueFunc(LPVOID arg){
    //printf(&quot;Thread Created\n&quot;);
    x = (i + .5)*step;
    sum = sum + 4.0 / (1. + x*x);
    return 0;
}

int main(int argc, char* argv[]) {
    clock_t start, stop;
    step = 1. / (double)num_steps;
    start = clock();

    HANDLE hThread[num_steps];
    for (i = 0; i&lt;num_steps; i++) {         

        hThread[i] = CreateThread(NULL, 0, ValueFunc, NULL, 0, NULL);

    }

    WaitForMultipleObjects(num_steps, hThread, TRUE, INFINITE);

    pi = sum*step;
    stop = clock();
    printf(&quot;The value of PI is %15.12f\n&quot;, pi);
    printf(&quot;The time to calculate PI was %f seconds\n&quot;, ((double)(stop - start) / 1000.0));

}
        </code>
    </pre>
</div>

更新：

我在此页面中包含Bootstrap css。如果我将其评论出来，则会显示我想要的文本。这是一个jsfiddle：http://jsfiddle.net/Y29AM/ 如果删除指定的2个外部资源，您将看到其中的差异。知道在Bootstrap中需要覆盖哪些内容才能使其工作？

Answer 1

white-space: nowrap

关闭包装词。

Answer 2

我将以下内容添加到pre css：

pre {
    ...
    white-space: pre;
    word-wrap: normal;
}

并且还添加了这个css：

pre code {
    white-space: inherit;
}

现在它没有横向包裹，而是像我想要的那样工作。

Answer 3

这对我有用：

pre {
    white-space: pre-wrap;
}

剪辑<pre> tag outside of its container, and show scrollbars</pre>的垂直和水平溢出

3 个答案: