Issue with styling code and pre tags

Question

I am trying to style code and pre tags in css. The problem is when i copy a code containing new lines, the border breaks and draws border starting again.

Take a look on the this screenshot..

Here is my code

pre {
    outline:1px solid #555;
    background: #e0e0e0;
    white-space:pre-wrap;
}

How to fix this? How to make one single box? Thanks@ Merry christmas to all those in this forum.

Answer 1

I've tried this with no issue.

Here's what I've got on jsFiddle ... REMOVED. Don't know where the fiddle went ... corrected version here: http://jsfiddle.net/rfornal/g3Lswzt0/

The code I used is here ...

<pre>
.comment-meta a {
    margin:0;
}

.comment-body p {
    display: block;
    padding-left:170px;
}
</pre>

... with CSS ...

pre {
    outline:1px solid #555;
    background: #e0e0e0;
    white-space:pre-wrap;
}

There may be some other CSS causing the problem. It would be good to see the code.