title: How to set the input area height equal to the placeholder paragraph's height
body: <p>Because the placeholder contains too many text, in order to show them, I use <code>white-space:pre-line</code> on the placeholder, so the placeholder text become multiple line paragraph, but the input height doesn't change.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    white-space:pre-line;  
  }
  ::-moz-placeholder { /* Firefox 19+ */
       white-space:pre-line;
  }
  :-ms-input-placeholder { /* IE 10+ */
      white-space:pre-line; 
  }
  :-moz-placeholder { /* Firefox 18- */
       white-space:pre-line;
  }
  input {
      width:300px;
      height:30px; /* I hope the height is not a static value, but can auto equal to the placeholder paragraph's height*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" placeholder="There are too many text, in order to show them, I set it to white-space:pre-line so it become multiple line paragraph"/&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>To set a static height on input is not a good idea, because if the user zoom to resize the browser, the placeholder text size changes as well, the placeholder become two line or three line which is dynamic.</p>
  <p>Is there a way to set the input area height equal to the placeholder paragraph's height?</p>