(bug 260) Wrap <pre> overflow properly.

The previous approach with overflow: hidden; had issues.
This is much better. See inline comment as well as the discussion
on bug 260 for more information and the cross-browser test.

And it took only 8 years!

* Ref:
- bug 260
- bug 414
- bug 22060

Change-Id: I7eec3ffeaa5ad633270714ce06023b29a71519f9

diff --git a/skins/common/commonElements.css b/skins/common/commonElements.css
index 02fd29f..57f81a0 100644 (file)
--- a/skins/common/commonElements.css
+++ b/skins/common/commonElements.css
@@ -198,6 +198,22 @@ pre, .mw-code {
        border: 1px dashed #2f6fab;
        color: black;
        background-color: #f9f9f9;
+
+       /*
+        * Wrap properly.
+        * - pre-wrap: causes the browser to naturally wrap by displaying
+        *   words on the next line if they don't fit on the same line
+        *   within the box (does not cut off words).
+        * - break-word: forces the browser to wrap anywhere (even within
+        *   a word) if it is (still) too long for the line.
+        * When only using break-word in a <pre>, the browser only uses
+        * the force behavior and as a result almost always cuts half-way
+        * a word. When only using pre-wrap, too-long words will still
+        * cause the page layout to break. The combination is magic :).
+        * See also https://bugzilla.wikimedia.org/show_bug.cgi?id=260#c20
+        */
+       white-space: pre-wrap;
+       word-wrap: break-word;
 }
 
 /* Tables */