Fix hyphens (#77)

* fix: allow auto-hyphenation for the entire document

* feat: add `nowrap` class to prevent undesired line breaks

* fix: rename utility class `nowrap` -> `whitespace-nowrap`

---------

Co-authored-by: Vincent Dörig <[email protected]>

Author: vihuna

index.html

@@ -67,6 +67,7 @@ <h2>Contents</h2>
               <li><a href="#table-column-aligment">Table Column Alignment</a></li>
             </ol>
           </li>
+          <li><a href="#auto-hyphenation">Automatic Hyphenation</a></li>
         </ol>
       </li>
       <li><a href="#language-support">Language Support</a></li>
@@ -247,6 +248,15 @@ <h4 id="table-column-aligment">Table Column Alignment</h4>
 
       <p>See full examples in the <a href="#tables">section about tables</a>.</p>
 
+      <h4 id="auto-hyphenation">Automatic Hyphenation</h4>
+        <p>
+          By default, hyphenation is allowed for all words in the document when text wraps
+          across multiple lines, except for code snippets. If you want to avoid this
+          behaviour for a specific word (for example, for a hyphenated compound word),
+          you can use the <code class="language-css">whitespace-nowrap</code> utility class to
+          prevent line breaks inside an element.
+        </p>
+
       <h2 id="language-support">Language Support</h2>
       <p>
         The labels of theorems, definitions, lemmas and proofs can be changed

style.css

@@ -197,14 +197,16 @@ body {
   background-color: var(--body-bg-color);
 
   text-rendering: optimizeLegibility;
-}
 
-/* Justify and hyphenate all paragraphs */
-p {
-  text-align: justify;
+  /* Allow automatic hyphenation for all text in the document */
   hyphens: auto;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
+}
+
+/* Justify all paragraphs */
+p {
+  text-align: justify;
   margin-top: 1rem;
 }
 
@@ -682,6 +684,11 @@ input.sidenote-toggle {
   line-height: 1ex;
 }
 
+/* Prevent line breaks inside an element */
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 /* Heading typography */
 h1 {
   font-size: 2.5rem;