title: How can I evenly balance text over multiple lines?
body: <p>I'd like to display a short piece of text that may wrap to two or three lines. It's inside a highly visual element and for styling purposes I'd like the lines to be as equal in length as possible, preferring one line over two.</p>
  
  <p>Instead of this:</p>
  
  <blockquote>
    <p>This is an example of a piece of text that will wrap to two</p>
    
    <p>lines.</p>
  </blockquote>
  
  <p>I want this:</p>
  
  <blockquote>
    <p>This is an example of a piece of</p>
    
    <p>text that will wrap to two lines.</p>
  </blockquote>
  
  <p>But I don't want to limit the width of the text container:</p>
  
  <blockquote>
    <p>This text is long enough to just barely fit in two lines. It</p>
    
    <p>should not wrap to three or more lines so no width limiting.</p>
  </blockquote>
  
  <p>Is there a way to do this in pure CSS or with a tolerable amount of JavaScript?</p>