Prevent automatic line breaks in a `tag`

Question

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

Ugly 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:

Single line

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

Could you put some simple code of what you have done so that we can inspect. — Cam, May 08 '13 at 16:15
`pre` markup implies that the text is rendered as-is, with no wrapping and no line breaks except as in the source code or caused by markup. So there must be something in your code that prevents that. Please post a demo that demonstrates what is really going on (preferably, minimal HTML and CSS that actually shows the problem). — Jukka K. Korpela, May 08 '13 at 17:35
You were right - it was a style inside twitters bootstrap framework that caused the problem. :) — Christian Engel, May 08 '13 at 18:21

score 24 · Accepted Answer · answered May 08 '13 at 18:24

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.

score 0 · Answer 2 · answered May 08 '13 at 16:19

0

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+ */  
}

answered May 08 '13 at 16:19

Rajender Joshi

4,155
1
23
39

Prevent automatic line breaks in a `tag`

2 Answers2

Linked

Prevent automatic line breaks in a tag

2 Answers2

Linked

Prevent automatic line breaks in a `tag`