Prevent automatic line breaks in a tag

问题:

I have a html code tag, wrapped in in a pre tag with fixed width and am getting ugly automatic line breaks:

What I want to achieve is, that the text is NOT automatically broken on spaces, but when I add a white-space: nowrap to the code element, the whole thing collapses to a single line, so all \n and \r characters are ignored as well:

Does anyone have an idea how to prevent automatic line breaks, but keep the intended line breaks?

回答1:

The problem was caused by twitter bootstrap. For whatever reason, they added the following styles to the code tag:

white-space:pre;
white-space:pre-wrap;
word-break:break-all;
word-wrap:break-word;

By overwriting the styles with:

white-space: pre;
word-break: normal;
word-wrap: normal;

The problem was fixed.

回答2:

I hope this might help you. Demo

.content pre
{
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap; 
    word-wrap: break-word; /* Internet Explorer 5.5+ */  
}