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 */