feat: add text-wrap and text-nowrap css mixins (#124)

Also fix safari not breaking long words.

Author: satazor

www/shared/styles/global/typography.css

@@ -11,10 +11,9 @@ html {
 body {
     @mixin typography-body-1;
     @mixin text-smooth;
+    @mixin text-wrap;
 
     color: var(--color-black);
-    overflow-wrap: break-word; /* Break long words, while keeping them together if possible (fallback) */
-    overflow-wrap: anywhere;  /* Break long words, while keeping them together if possible */
     -webkit-tap-highlight-color: transparent;  /* Do not show a highlight (rectangle around the link) while tapping it */
 }
 

www/shared/styles/imports/mixins/text.css

@@ -13,19 +13,32 @@
 }
 
 /* ==========================================================================
-   Ellipsis mixin
+   Text wrap related mixins
 
-   The container needs to have a width for it to work
+   Please note that for text-ellipsis and text-ellipsis-multiline to work,
+   they most likely need to be restricted in width
    ========================================================================== */
 
+@define-mixin text-wrap {
+    white-space: normal;
+    word-wrap: anywhere;
+    word-break: break-word; /* Needed for iOS Safari, since it does not support `word-wrap: anywhere` */
+}
+
+@define-mixin text-nowrap {
+    white-space: nowrap;
+    word-wrap: normal;
+    word-break: normal;
+}
+
 @define-mixin text-ellipsis {
+    @mixin text-nowrap;
     overflow: hidden; /* "overflow" value must be different from "visible" */
     text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow-wrap: normal;
 }
 
 @define-mixin text-ellipsis-multiline $maxLineCount, $maxHeight {
+    @mixin text-wrap;
     max-height: $maxHeight;
     overflow: hidden;
     /* stylelint-disable */