title: Show hyphens only when necessary? (soft-hyphens doesn't cut it)
body: <p>Is it possible to use hyphens, or soft-hyphens in CSS, in such a way that hyphens are not rendered unnecessarily?</p>
  <p>My goal is to keep the original text as much as possible and break any words unless absolutely critical because they are too long to fit the container width.</p>
  <h3>My specific case</h3>
  <p>I want to render the text &quot;Hi Superman&quot; in such a way that:</p>
  <p>If the word &quot;Superman&quot; is too long to fit inside a container, I want to hyphenate it in some way, for instance:</p>
  <pre><code>Hi Super-
  man
  </code></pre>
  <p>But if the word “Superman” could fit in the container it must be rendered without hyphens</p>
  <pre><code>Hi
  Superman
  </code></pre>
  <p>If the case above is possible (&quot;Superman&quot; could be written unhyphenhated) it is UNACCEPTABLE to add <em>unnecessary hyphens</em> like this:</p>
  <pre><code>Hi Super-
  man
  </code></pre>
  <p>I can change the HTML however I want. I'm allowed to inject hyphens in a way that makes sense (As long as there's more than 3 letters between each hyphen it's okay. &quot;Superma-n&quot; is never okay)</p>
  <h3>What I've tried</h3>
  <p>I thought soft-hyphens would be the solution. So I used: <code>Hi Super&amp;shy;man</code></p>
  <p>But I found out that this will result in the unacceptable case of &quot;unnecessary hyphenation&quot; shown above.</p>
  <h3>Snippet to show the failure:</h3>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { 
    margin-left: 30px;
  }
  div {
     border: solid 1px black;
  }
  .wide {
    border: solid 1px blue;
        width: 500px;
  }
  .narrow { 
    border: solid 1px red;
    width: 360px;
  }
   h2 {
     font-family: 'Courier New';
      font-weight: 400;
      font-size: 87px;
    }
  code {
   background-color: #eee;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt; &lt;code&gt;Super&amp;amp;shy;man&lt;/code&gt; looks good in really narrow containers where the full word "Superman" would not fit&lt;/p&gt;
  &lt;p&gt;
  &lt;div class="narrow"&gt;&lt;h2&gt;Hi Super&amp;shy;man&lt;/h2&gt;&lt;/div&gt;
  
  &lt;p&gt;But in this case the word "Superman" would fit unhypenhated on the second row. But the damn CSS decides to add hyphens anyway. Unacceptable in my case!
  Again, this uses the same code as the previous example
  &lt;code&gt;Super&amp;amp;shy;man&lt;/code&gt;&lt;/p&gt;
  &lt;div class="wide"&gt;&lt;h2&gt;Hi Super&amp;shy;man&lt;/h2&gt;&lt;/div&gt;
  
  &lt;p&gt;I even tried adding a wordbreak tag before "Superman", like this &lt;code&gt;Hi &amp;lt;wbr&amp;gt; Super&amp;amp;shy;man&lt;/code&gt; but it does not help&lt;/p&gt;
  &lt;p&gt;  &lt;/p&gt;
  &lt;div class="wide"&gt;&lt;h2&gt;Hi &lt;wbr&gt;Super&amp;shy;man&lt;/h2&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Can I solve the example above with just CSS? (Tried different <code>word-break</code> properties without any success)</p>
  <p><strong>My guess</strong> is that this is impossible to solve this with just simple HTML and CSS due to the nature of CSS. I assume CSS just parses text line-by-line and it can never know if a word would &quot;fit better&quot; on the next row of text. If it finds a hyphen, it will try to fit the maximum amount of chars on the current line of text.</p>
  <p>I want to solve this with just HTML and CSS or not at all.</p>
  <p>Preferably:</p>
  <ul>
  <li><p>No text-parsing with JavaScript.</p>
  </li>
  <li><p>I don't want to have to set different CSS-properties per div based on how wide the div is and whether I guess the text will need hyphenation or not.</p>
  </li>
  <li><p>Would prefer not to have to add wrappers around my words</p>
  </li>
  <li><p>No auto-hyphenation that can result in laughable hyphenations like &quot;Superma-n&quot; (However in a pinch I would be ok with auto-hyphenation as long as there's 3 chars between each hyphen. Like &quot;Sup-erman&quot;)</p>
  </li>
  </ul>