搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

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

  • 6 个回答
  • 1 人有此问题
  • 1 次查看
  • 最后回复者为 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.

由brknsoul于修改

被采纳的解决方案

Then you need to add the code selector as well.

code, pre {
white-space:pre-wrap !important;
word-wrap:break-word !important;
}
定位到答案原位置 👍 3

所有回复 (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

选择的解决方案

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