title: Move to new line when input field width exceeds
body: <p>I'm trying to move excess text to a new line when there's no more space in the first line. But my text just keep on filling in the same line without moving to another line. How can i fix this? I want to move to the next line when text is filled in the first line.</p>
  
  <p>I already tried</p>
  
  <pre><code>word-wrap: break-word
  
  white-space: initial;
  </code></pre>
  
  <p>But to no effect.</p>
  
  <p>My code is like below:</p>
  
  <pre><code>&lt;form onSubmit={ handleSubmit }&gt;
     &lt;div className="create_post_div unchange_div"&gt;
          &lt;Field
              name="askQuestionInput"
              component="input"
              type="text"
              className="post_input_preview unchange_div"
              placeholder="Ask your question here"
          /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My css classes:</p>
  
  <pre><code>.create_post_div{
  
      width: 100%;
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 10px;
  }
  
  .post_input_preview {
  
      width: 640px;
      border: none;
      margin-bottom: 10px;
      font-size: 16px;
      outline: none;
  }
  </code></pre>
  
  <p>Thanks in advance.</p>