Move to new line when input field width exceeds

Question

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.

I already tried

word-wrap: break-word

white-space: initial;

But to no effect.

My code is like below:

<form onSubmit={ handleSubmit }>
   <div className="create_post_div unchange_div">
        <Field
            name="askQuestionInput"
            component="input"
            type="text"
            className="post_input_preview unchange_div"
            placeholder="Ask your question here"
        />
    </div>
</form>

My css classes:

.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;
}

Thanks in advance.

Answer 1

HTML input elements won't wrap in the way that you're describing. See here.

You can however change your input type=['text'] to a textarea, and as a user types, the text will wrap onto the next line. See this answer.