Quellcode durchsuchen

fix: word wrap long lines on mobile

George Cushen vor 5 Jahren
Ursprung
Commit
0a8cbcb8d9
1 geänderte Dateien mit 23 neuen und 0 gelöschten Zeilen
  1. 23 0
      assets/scss/academic/_content.scss

+ 23 - 0
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;