Force break-word to apply to component elements under iOS (fixes jose…

…ph#70).

Huge thanks to @aronwoost for tracking down the cause of the problem,
which was that apparently the order in which the CSS is applied is
important. If an element has break-word, but the container doesn't have
a width (and an absolute position), it does not apply. It still doesn't
apply if the container later gets a width/position.

The fix was to apply all the CSS at the same time.

src/core/reader.js

@@ -748,6 +748,7 @@ Monocle.Reader = function (node, bookData, options, onLoadCallback) {
   return API;
 }
 
+
 Monocle.Reader.RESIZE_DELAY = 100;
 Monocle.Reader.DEFAULT_SYSTEM_ID = 'RS:monocle'
 Monocle.Reader.DEFAULT_CLASS_PREFIX = 'monelem_'
@@ -760,8 +761,10 @@ Monocle.Reader.DEFAULT_STYLE_RULES = [
   "}",
   "html#RS\\:monocle body {" +
     "margin: 0 !important;"+
-    "border: none !important;"+
-    "padding: 0 !important;"+
+    "border: none !important;" +
+    "padding: 0 !important;" +
+    "width: 100% !important;" +
+    "position: absolute !important;" +
     "-webkit-text-size-adjust: none;" +
   "}",
   "html#RS\\:monocle body * {" +

src/dimensions/columns.js

@@ -194,6 +194,8 @@ Monocle.Dimensions.Columns = function (pageDiv) {
 
 
 Monocle.Dimensions.Columns.STYLE = {
+  // Most of these are already applied to body, but they're repeated here
+  // in case columnedElement() is ever anything other than body.
   "columned": {
     "margin": "0",
     "padding": "0",