title: css breaking words only if no spaces
body: <p>I have this code:</p>
  
  <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>.mydiv {
    display: table;
    table-layout: fixed;
    width: auto;
    max-width: 448px;
    height: 56px;
  }
  
  .mydiv span {
    display: table-cell;
    vertical-align: middle; 
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mydiv"&gt;
    &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works fine most of the time as, by default, if the text is longer than a line, the line breaks at the closest space and words are never divided into half-words.
  Good.</p>
  
  <p>But, in the only case where a sentence has no spaces (this is never supposed to happen but people are people), the interface will break and the long word will then remain on one line.</p>
  
  <p>IS there a way to prioritize css so that, IF there are spaces, the sentence is cut without cutting the words (word-wrap: break-word;) but IF the word is bigger than a line, the line breaks, cutting the word (word-break: break-all;) to avoid a visual disaster. In that order.</p>
  
  <p>So far, if I use "word-wrap: break-word;", one long word will remain on one line, whatever its length and if I use "word-break: break-all;" the words will then be broken even if there are spaces available before.
  none of these standard solution are helping.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>I would like a CSS solution, preferably, but if it's not possible, a JS/jQuery solution would do too.</p>
  
  <p>PS: I need the div to have an auto width with a max-width and I need the span to remain a table-cell.</p>