additional text wrapping example

jsnkuhn · Feb 8, 2021 · acab1e3 · acab1e3
1 parent a938400
commit acab1e3
Showing 1 changed file with 54 additions and 0 deletions.
diff --git a/css-text/hyphens.html b/css-text/hyphens.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>overflow-wrap and hyphens: manual</title>
+    <link rel="stylesheet" href="styles.css" />
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      .box {
+        border: 4px solid #f76707;
+        border-radius: 5px;
+        padding: 10px;
+      }
+    </style>
+
+    <style class="editable">
+      .box {
+        inline-size: 150px;
+        overflow-wrap: break-word; 
+        hyphens: manual;
+      }
+    </style>
+  </head>
+
+  <body>
+    <section class="preview">
+      <div class="box">
+        Llanfair&shy;pwllgwyngy&shy;llgogerychwyrndrobwllllantysiliogogogoch
+      </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 100px;">
+.box {
+    inline-size: 150px;
+    overflow-wrap: break-word;
+    hyphens: manual;
+}
+    </textarea>
+
+    <textarea class="playable playable-html" style="height: 150px;">
+<div class="box">
+    Llanfair&shy;pwllgwyngy&shy;llgogerychwyrndrobwllllantysiliogogogoch
+</div>
+    </textarea>
+
+    <div class="playable-buttons">
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  </body>
+  <script src="playable.js"></script>
+</html>