title: Smarter word break in CSS?
body: <p>If I just put <code>word-break: break-all</code> on an element, I often end up with this:</p>
  
  <blockquote>
    <p>Hello people, I am typing a mes<br>
    sage that's too long to fit!</p>
  </blockquote>
  
  <p>Obviously this would be much better as:</p>
  
  <blockquote>
    <p>Hello people, I am typing a<br>
    message that's too long to fit!</p>
  </blockquote>
  
  <p>But at the same time if someone writes:</p>
  
  <blockquote>
    <p>BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH!!!!!!</p>
  </blockquote>
  
  <p>Then I'd want it to be:</p>
  
  <blockquote>
    <p>BLAAAAAAAAARRRRRRRRRRR<br>
    RGGGGGGGGHHHHHHHH!!!!!!</p>
  </blockquote>
  
  <p>I can't seem to find a way to actually do this.</p>
  
  <p>Note that the width of the element is not fixed and may change.</p>