We help IT Professionals succeed at work.

Text wont Wrap (CSS)

Pete Long
Pete Long asked
on
126 Views
Last Modified: 2018-09-19
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

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

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 Architect
CERTIFIED EXPERT
Distinguished Expert 2019

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?
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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 Architect
CERTIFIED EXPERT
Distinguished Expert 2019

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 Architect
CERTIFIED EXPERT
Distinguished Expert 2019

Author

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

Another Question coming soon
Pete LongTechnical Architect
CERTIFIED EXPERT
Distinguished Expert 2019

Author

Commented:

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.