Text wont Wrap (CSS)

Pete Long
Pete Long used Ask the Experts™
on
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 :(
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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 LongTechnical Consultant

Author

Commented:
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?
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Hey Pete,

Yes it would ... except the css that you posted has an error in it. Everything between /* and */ is treated as a comment - you've basically commented out everything apart from the first line. Remove all the comment tags and you should be fine. If you want the comments, then wrap each one on it's own:

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

Open in new window

For code snippets, I would still recommend the scrollbar though! As a coder, I find it annoying when code lines break where they shouldn't :)
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
(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.
Pete LongTechnical Consultant

Author

Commented:
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 LongTechnical Consultant

Author

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

Another Question coming soon

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial