Within a div element set to a specific size of 300px by 300px, there lies a pre tag containing a snippet of source code. The size of the snippet can vary. My goal is to style both the div and the pre tag in a way that prevents horizontal wrapping of the source code unless there is a line break. Additionally, any overflow should be hidden with scroll bars displayed, catering to both horizontal and vertical overflow scenarios.
Currently, I have managed to implement a vertical scroll bar while facing issues with text wrapping horizontally. Below is the CSS code I am using (largely adapted from 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;
}
Furthermore, here is an example of how the HTML structure looks like:
<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];
for (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 is %15.12f\n", pi);
printf("The time to calculate PI was %f seconds\n", ((double)(stop - start) / 1000.0));
}
</code>
</pre>
</div>
UPDATE:
I have incorporated Bootstrap css on this page, leading to unwanted display behavior. Upon commenting it out, the text appears as desired. A jsfiddle showcasing the issue can be found here: http://jsfiddle.net/Y29AM/. Removing the two external resources specified there will highlight the impact of Bootstrap. Any suggestions on what aspects of Bootstrap need modification to achieve the intended result?