title: Responsive text with JS and jQuery
body: <p>I'm trying to set up a simple title on my site, that if the window is scaled or loaded below a certain px width, changes the text within to be shorter, then if scaled larger again pops back to the original HTML again. However, for some reason, this is proving to be very difficult.</p>
  
  <p>Right now I have:</p>
  
  <pre><code>&lt;script&gt;
  if ( $(window).width() &gt; 480) {    
      $(".title").html("&lt;a class='title' href='/'&gt;LONGTEXTLONGTEXT&lt;/a&gt;");
  }
  &lt;/script&gt;
  
  &lt;script&gt;
  window.addEventListener('resize', function(event){
      if ( $(window).width() &lt; 480) {    
          $(".title").html("&lt;a class='title' href='/'&gt;SHORTTEXT&lt;/a&gt;");
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But for some reason it simply fails.</p>
  
  <p>Any ideas?</p>