This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How can I force <pre> (or bbcode [code]) tags to word wrap?

  • 6 replies
  • 1 has this problem
  • 1 view
  • Last reply by brknsoul

more options

I've recently switched from Opera 12 to Firefox.

I use the World of Warcraft UI and Macros forum a lot and I use the {code} tag when posting scripts or macros.


In Opera, {code} tags would word wrap nicely, allowing me to see the entire code block; http://i.imgur.com/AhJJwHH.jpg

However, in Firefox the {code} tag doesn't wrap and gives me a horizontal scrollbar; http://i.imgur.com/CC6nwSi.jpg

How can I force pre or {code} tags to word wrap in FIrefox? I imagine I could override this behaviour with CSS styles, but I'm a complete noob at how to even start with this. A step-by-step tutorial would be best.

Thanks in advance.

I've recently switched from Opera 12 to Firefox. I use the World of Warcraft UI and Macros forum a lot and I use the {code} tag when posting scripts or macros. In Opera, {code} tags would word wrap nicely, allowing me to see the entire code block; http://i.imgur.com/AhJJwHH.jpg However, in Firefox the {code} tag doesn't wrap and gives me a horizontal scrollbar; http://i.imgur.com/CC6nwSi.jpg How can I force pre or {code} tags to word wrap in FIrefox? I imagine I could override this behaviour with CSS styles, but I'm a complete noob at how to even start with this. A step-by-step tutorial would be best. Thanks in advance.

Modified by brknsoul

Chosen solution

Then you need to add the code selector as well.

code, pre {
white-space:pre-wrap !important;
word-wrap:break-word !important;
}
Read this answer in context 👍 3

All Replies (6)

more options

You would have to apply these style rules via the userContent.css file. The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

pre {
white-space:pre-wrap !important;
word-wrap:break-word !important;
}

more options

Is this correct (location, file, contents)?; http://i.imgur.com/JnRTvcy.jpg

If so, it doesn't seem to work. Perhaps the WoW forums are using something than ignores this method?

more options

The screenshot doesn't show the file type of the userContent.css file, so I can't see if it isn't a text file with a hidden .txt file extension.

Did you make sure that the website is actually using a <pre> tag by checking the code in the Inspector via Inspect Element in the right-click context menu?

more options

The file is a .css file and not a .css.txt file.. first thing i do is to unhide file extensions. :-P

Hmm, looks like code tags;

http://i.imgur.com/RJjAn8A.jpg

more options

Chosen Solution

Then you need to add the code selector as well.

code, pre {
white-space:pre-wrap !important;
word-wrap:break-word !important;
}
more options

Woo! Thanks Cor-el. That did the trick!

Here, have a virtually delicious internet cookie; http://i.imgur.com/tVeKgle.jpg