title: White space nowrap but break line if greater than max width in css
body: <p>I use <code>white-space: nowrap</code> so my string will stay in one line but I also set <code>max-width: 100px</code> because I want the string to break only when over the <code>max-width</code>, makes sense only the two parameters conflicts each other. The <code>white-space</code> property &quot;overpower&quot; the <code>max-width</code> property and the string stay in one line.</p>
  <pre><code>&lt;div class=&quot;mydiv&quot;&gt;this is my text&lt;/div&gt;
  </code></pre>
  <pre><code>.mydiv {
    position: absolute;
    white-space: nowrap;
    max-width: 100px;
    left: 50%;
    transform: translateX(-50%);
  }
  </code></pre>
  <p>I tried &quot;playing&quot; with <code>overflow-wrap</code> property but that didn't work either.</p>
  <p>If I remove the <code>white-space</code> property, the string break word by word, each word in a new line. That's happening because the element is <code>position: absolute</code>, I think..</p>
  <p>So how do I solve this?</p>