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(&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];     (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 %15.12f\n&quot;, pi);     printf(&quot;the time calculate pi %f seconds\n&quot;, ((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.