diff --git a/CHANGELOG.md b/CHANGELOG.md
index f67e70400..d72ab9d76 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Styling issue on status bar on mobile (#1217)
 - Change tab `block-size` to `min-block-size` to allow for height increase when text wraps (#1219)
 - Changed `SkulptRunner.jsx` implementation of hiding elements to use `display: none` rather than `block-size: 0` (#1219)
+- Enabled `hyphens: auto` globally (with exceptions) to prevent overflow with longer words (#1215)
 
 ## [0.30.1] - 2025-06-09
 
diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index 189405bf0..42167d9b3 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -58,10 +58,28 @@
   display: flex;
   flex-flow: column;
   block-size: 100%;
+  hyphens: auto;
+  hyphenate-limit-chars: 10 4 4; // Minimum of 10 characters before hyphenating, minimum of 4 character before and after the hyphen.
 
   .proj {
     min-block-size: 100%;
   }
+
+  code,
+  var,
+  kbd,
+  samp,
+  tt,
+  dir,
+  listing,
+  plaintext,
+  xmp,
+  abbr,
+  acronym,
+  blockquote,
+  q {
+    hyphens: none;
+  }
 }
 
 code {
@@ -91,7 +109,6 @@ button:focus-visible {
   }
 }
 
-
 .--light {
   --editor-color-layer-1: #{$rpf-teal-100};
   --editor-color-layer-2: #{$rpf-white};
@@ -120,5 +137,6 @@ button:focus-visible {
   --editor-color-tab-background: #{$rpf-grey-700};
 
   .rpf-button--secondary {
-    border-color: $rpf-navy-800;}
+    border-color: $rpf-navy-800;
+  }
 }