Better handling hyphenations

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