css - Clip the vertical and horizontal overflow of <pre> tag outside of its container, and show scrollbars -
i have div specific size (300px 300px). inside div pre
tag snippet of source code. snippet can of arbitrary size. i'm trying style div
, pre
tag source code not wrap horizontally unless there line break. , if there overflow, should not visible, , scroll bars should displayed. should work both horizontal , vertical overflow.
so far have vertical scroll bar, text gets wrapped horizontally. here css (mostly copied stackoverflow's code formatting):
pre { max-height: none\9; padding: 5px; font-family: consolas, monaco; margin-bottom: 10px; overflow: auto; text-overflow: clip; width: 300px; height: 300px; }
and here example of html:
<div class="item" data-handle=".snippetheader"> <h5 class="snippetheader">snippet7</h5> <div class="code"> <pre> <code> dword winapi valuefunc(lpvoid arg){ //printf("thread created\n"); 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]; (i = 0; i<num_steps; i++) { hthread[i] = createthread(null, 0, valuefunc, null, 0, null); } waitformultipleobjects(num_steps, hthread, true, infinite); pi = sum*step; stop = clock(); printf("the value of pi %15.12f\n", pi); printf("the time calculate pi %f seconds\n", ((double)(stop - start) / 1000.0)); } </code> </pre> </div>
update:
i include bootstrap css in page. if comment out, text displayed how want. here jsfiddle: http://jsfiddle.net/y29am/ if remove 2 external resources specified there you'll see difference. idea in bootstrap needs overriden make work?
white-space: nowrap
turn word wrapping off.
Comments
Post a Comment