title: Break non-hyphenated compound words at word boundary
body: <p>I am using <a href="https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29">Bootstrap</a>. Let us say I have text that looks like this:</p>
  
  <blockquote>
    <p>"Stackoverflow"</p>
  </blockquote>
  
  <p>Can I somehow automatically make sure that it breaks like this if the text does not fit the container:</p>
  
  <blockquote>
    <p>"Stack <br/>
    -overflow"</p>
  </blockquote>
  
  <p>instead of:</p>
  
  <blockquote>
    <p>"Stackov <br/>
    -erflow"</p>
  </blockquote>
  
  <p>with HTML/CSS?</p>