Better handling hyphenations

css/knacss-unminified.css

@@ -760,41 +760,6 @@ kbd {
   }
 }
 
-/* ----------------------------- */
-/* ==Misc                        */
-/* ----------------------------- */
-@media (max-width: 575px) {
-  /* you shall not pass */
-  div,
-  textarea,
-  table,
-  td,
-  th,
-  code,
-  pre,
-  samp {
-    word-wrap: break-word;
-    -webkit-hyphens: auto;
-        -ms-hyphens: auto;
-            hyphens: auto;
-  }
-}
-
-@media (max-width: 575px) {
-  .no-wrapping {
-    word-wrap: normal;
-    -webkit-hyphens: manual;
-        -ms-hyphens: manual;
-            hyphens: manual;
-  }
-}
-
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  img[src$=".svg"] {
-    width: 100%;
-  }
-}
-
 /* ----------------------------- */
 /* ==Global Micro Layout         */
 /* ----------------------------- */
@@ -1006,6 +971,19 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
   font-size: 2em;
 }
 
+.u-txt-wrap {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  -webkit-hyphens: auto;
+      -ms-hyphens: auto;
+          hyphens: auto;
+}
+
+.u-txt-ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 /* State Helpers */
 /* ------------- */
 /* invisible for all */

sass/_config/_variables.scss

@@ -72,6 +72,9 @@ $weight-regular : 400 !default;
 $weight-medium  : 500 !default;
 $weight-bold    : 700 !default;
 
+// Activate hyphenation on small screens
+$hyphens: false !default;
+
 // ------------
 // Spacing zone
 // ------------

sass/_library/_misc.scss

@@ -1,34 +0,0 @@
-/* ----------------------------- */
-/* ==Misc                        */
-/* ----------------------------- */
-
-// hyphens on tiny screens
-@media (max-width: ($small - 1)) {
-  /* you shall not pass */
-  div,
-  textarea,
-  table,
-  td,
-  th,
-  code,
-  pre,
-  samp {
-    word-wrap: break-word;
-    hyphens: auto;
-  }
-}
-
-// use .no-wrapping to disallow hyphens on tiny screens
-@media (max-width: ($small - 1)) {
-  .no-wrapping {
-    word-wrap: normal;
-    hyphens: manual;
-  }
-}
-
-// SVG width IE fix. WARNING: use only if you have SVG problems on IE.
-// @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-//   img[src$=".svg"] {
-//     width: 100%;
-//   }
-// }

sass/_library/_utilities.scss

@@ -46,6 +46,34 @@
   font-size: 2em;
 }
 
+.u-txt-wrap {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+.u-txt-ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@if variable-exists(hyphens) and $hyphens==true {
+  @media (max-width: ($small - 1)) {
+    div,
+    textarea,
+    table,
+    td,
+    th,
+    code,
+    pre,
+    samp {
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      hyphens: auto;
+    }
+  }
+}
+
 /* State Helpers */
 /* ------------- */
 

sass/knacss.scss

@@ -43,7 +43,6 @@
 // Core Libraries
 @import "_library/base";         // basic styles
 @import "_library/print";        // print quick reset
-@import "_library/misc";         // skip links, hyphens
 @import "_library/layout";       // alignment, modules, positionning
 @import "_library/utilities";    // width and spacers helpers
 @import "_library/responsive";   // Responsive Web Design helpers