From: Timo Tijhof <ttijhof@wikimedia.org>
Date: Sat, 21 Jul 2012 21:26:21 +0000 (-0700)
Subject: (bug 260) Wrap <pre> overflow properly.
X-Git-Tag: 1.31.0-rc.0~22955
X-Git-Url: http://git.cyclocoop.org/%24self?a=commitdiff_plain;h=782b9f177404f02417c03abaf96b371e1462f160;p=lhc%2Fweb%2Fwiklou.git

(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 02fd29fe20..57f81a0fef 100644
--- 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 */