Avatar of Pete Long
Pete Long
Flag 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;

text wont wrap
source URL:https://www.petenetlive.com/KB/Article/0001469

Whats wrong in my CSS?

Im probably going to be asking a few questions today :(
CSSFirefox

Avatar of undefined
Last Comment
Pete Long

8/22/2022 - Mon
Chris Stanyon

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.
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
Chris Stanyon

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen

(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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Pete Long

ASKER
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

Pete Long

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

Another Question coming soon
Pete Long

ASKER
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.