Work around lack of <wbr> support in IE/Opera
authorAryeh Gregor <AryehGregor+gitcommit@gmail.com>
Tue, 07 Jun 2011 12:39:57 -0600
changeset 246 9619abb1e583
parent 245 4e7ef1ad32db
child 247 8b15f8fcc5c6
Work around lack of <wbr> support in IE/Opera
tests.css
tests.js
--- a/tests.css	Tue Jun 07 12:31:18 2011 -0600
+++ b/tests.css	Tue Jun 07 12:39:57 2011 -0600
@@ -32,6 +32,11 @@
 	padding-top: 0.2em;
 	border-top: 1px solid black;
 }
+/* Workaround for browsers that don't treat <wbr> as a line-break opportunity
+ * (activated via JS feature-detection) */
+body.wbr-workaround > div > table > tbody > tr > td > div:last-child {
+	word-wrap: break-word;
+}
 /* https://bugs.webkit.org/show_bug.cgi?id=56670 */
 dfn { font-style: italic }
 /* Opera has weird default blockquote style */
--- a/tests.js	Tue Jun 07 12:31:18 2011 -0600
+++ b/tests.js	Tue Jun 07 12:39:57 2011 -0600
@@ -24,6 +24,24 @@
 }
 updateAlertRowStyle();
 
+// Feature-test whether the browser wraps at <wbr> or not, and set word-wrap:
+// break-word where necessary if not.  (IE and Opera don't wrap, Gecko and
+// WebKit do.)  word-wrap: break-word will break anywhere at all, so it looks
+// significantly uglier.
+(function() {
+	var wordWrapTestDiv = document.createElement("div");
+	wordWrapTestDiv.style.width = "5em";
+	document.body.appendChild(wordWrapTestDiv);
+	wordWrapTestDiv.innerHTML = "abc";
+	var height1 = getComputedStyle(wordWrapTestDiv).height;
+	wordWrapTestDiv.innerHTML = "abc<wbr>abc<wbr>abc<wbr>abc<wbr>abc<wbr>abc";
+	var height2 = getComputedStyle(wordWrapTestDiv).height;
+	document.body.removeChild(wordWrapTestDiv);
+	if (height1 == height2) {
+		document.body.className += " wbr-workaround";
+	}
+})();
+
 // Now for the meat of the file.
 var tests = {
 	backcolor: [