Responsive pre>code

1 files changed, 17 insertions, 0 deletions

diff --git a/assets/src/styles/_components/content.scss b/assets/src/styles/_components/content.scss
index 674a092..26e53f2 100644
--- a/assets/src/styles/_components/content.scss
+++ b/assets/src/styles/_components/content.scss
@@ -118,6 +118,23 @@ body {
           code {
             background-color: $color-zhen-zhu-bai-pearl;
             color: $color-bara-red;
+            white-space: normal;
+
+            /* These are technically the same, but use both */
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+
+            -ms-word-break: break-all;
+            /* This is the dangerous one in WebKit, as it breaks things wherever */
+            word-break: break-all;
+            /* Instead use this non-standard one: */
+            word-break: break-word;
+
+            /* Adds a hyphen where the word breaks, if supported (No Blink) */
+            -ms-hyphens: auto;
+            -moz-hyphens: auto;
+            -webkit-hyphens: auto;
+            hyphens: auto;
           }
         }