From 0a8cbcb8d9b13594b26c65e1193117816c7a32d4 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Wed, 12 Aug 2020 00:44:30 +0100
Subject: [PATCH] fix: word wrap long lines on mobile

---
 assets/scss/academic/_content.scss | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/assets/scss/academic/_content.scss b/assets/scss/academic/_content.scss
index 3b18bd42..a1448ee2 100644
--- a/assets/scss/academic/_content.scss
+++ b/assets/scss/academic/_content.scss
@@ -132,6 +132,29 @@ article .article-metadata {
   content: '\00B7';
 }
 
+@mixin word-wrap() {
+  // Break very long words such as pasted URL strings.
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
+
+  // Add a hyphen where the word breaks, if supported (No Blink).
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.article-style {
+  // Break unresponsive block content, such as unresponsive embeds, to prevent horizontal scrolling.
+  overflow-x: hidden;
+
+  // Word wrap text content.
+  @include word-wrap();
+}
+
 .article-style img,
 .article-style video {
   margin-left: auto;