title: My Preview Text Keeps Truncating a Character
body: <p>Pretty confused on this one. Built out a simple input form with a corresponding preview (it's essentially creating a survey), but for some reason the preview text on the right never reveals the last character. Check out the screenshot: <a href="https://www.evernote.com/shard/s144/sh/f1c45522-6bcd-4241-aae8-70497c4bc757/3888c44d7c34481ce791974551fbcda0/res/832f002a-57ab-4d35-8233-455cd8a5d247/skitch.png" rel="nofollow">https://www.evernote.com/shard/s144/sh/f1c45522-6bcd-4241-aae8-70497c4bc757/3888c44d7c34481ce791974551fbcda0/res/832f002a-57ab-4d35-8233-455cd8a5d247/skitch.png</a>)</p>
  
  <p>Here's the code for the input: </p>
  
  <pre><code>    .control-group
        %label.control-label for="product-name" 
           Product Name&amp;nbsp;
           %a#help-campaign-product.icon-question-sign title="The name of the product or service whose features you are trying to value. Your survey respondents will see this."
        .controls
           %input#product-name.input-xlarge.required type="text" name="product-name" placeholder="My Product" value="{% if campaign.product_name %}{{ campaign.product_name }}{% endif %}"
  </code></pre>
  
  <p>and the code for the preview: </p>
  
  <pre><code>    #campaign-title
        .wrapper
          %h4#campaign-product-name style="text-align:center; font-family: Helvetica Neue,Helvetica,Arial,sans-serif; font-weight:300; font-size:24px;"
            My Product
      #preview-product-description style="display:none;"
        %h4#campaign-headline style="text-align:center; font-family: Helvetica Neue,Helvetica,Arial,sans-serif; font-weight:300; font-size:24px;"
  </code></pre>
  
  <p>I'm pretty stumped. :(</p>