Link to home
Start Free TrialLog in
Avatar of Pete Long
Pete LongFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Text wont Wrap (CSS)

Text wont wrap in firefox

Just done some updates on my website and I've noticed the code box text does not wrap any more?
It works fine in Safari but when I open it in Firefox or Opera this happens;

User generated image
source URL:https://www.petenetlive.com/KB/Article/0001469

Whats wrong in my CSS?

Im probably going to be asking a few questions today :(
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

By default, <pre> tags won't wrap. They're designed specifically not to. You could add wrapping by using the white-space declaration:

pre { white-space: pre-wrap; }

An alternative approach may be to just add a scroll bar. If it's important that the lines don't wrap (i.e. you're showing code block), then just add an overflow to the <pre>

pre { overflow: auto; }

Now you code will remain on the correct lines, but you'll be able to scroll horizontally.
Avatar of Pete Long

ASKER

cheers Chris

I already have this in my child theme css

pre {
word-break: break-all; /* webkit /
word-wrap: break-word;
white-space: pre;
white-space: -moz-pre-wrap; / fennec /
white-space: pre-wrap;
white-space: pre\9; / IE7+ */
}

shouldn't that be fixing the problem?
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
(no points) - definitely agree with Chris on this - use the overflow: auto rather than the wrap - it is what most sites that display code snippets do so it is understood - and in my view preferable to wrapping.
I added the overflow auto - now it behaves in safari / IE, Opera still wont work but hey-ho

pre {
word-break: break-all; /* webkit /
word-wrap: break-word;
white-space: pre;
white-space: -moz-pre-wrap; / fennec /
white-space: pre-wrap;
white-space: pre\9; / IE7+ */
overflow: auto;
}

Open in new window

Right we were typing at the same time - I will fix accordingly Thanks Guys

Another Question coming soon