title: How to get generated text to go on a new line after a number of characters
body: <p>So I have a photo frame designer you can find <a href="http://dunnrite.co.uk/frame2" rel="nofollow">here</a>. It is built using SVG. On it it allows the user to input their own text which displays on the photo frame. After 18 characters the text is too long to display on just one line. So how can I get it to move down a line when this 18 characters is exceeded? </p>
  
  <p>Here is some code. The full code is on the website if needed.</p>
  
  <pre><code>&lt;text class="text" transform="matrix(2.4428 0 0 1.5 624.6 550.5599)" font-family="'ComicSansMS'" font-size="41.6368"&gt;Your words here&lt;/text&gt;
  
  $('#input').keyup(function() {
      $('.text').html($(this).val());
  });
  </code></pre>