How can I force <pre> (or bbcode [code]) tags to word wrap?
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)
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;
}
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?
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?
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;
Chosen Solution
Then you need to add the code selector as well.
code, pre {
white-space:pre-wrap !important;
word-wrap:break-word !important;
}
Woo! Thanks Cor-el. That did the trick!
Here, have a virtually delicious internet cookie; http://i.imgur.com/tVeKgle.jpg
