当输入字段宽度超过时移动到新行

Question

当第一行没有更多空间时，我试图将多余的文本移到新行。但是我的文本只是继续填充同一行而不移动到另一行。我怎样才能解决这个问题？我想在第一行填充文本时移到下一行。

我已经试过了

word-wrap: break-word

white-space: initial;

但没有效果。

我的代码如下：

<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>

我的CSS类：

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

提前致谢。

Answer 1

word-wrap: break-word最近更改为overflow-wrap: break-word

\n\n

\n
• 会将长单词换行到下一行。
\n
• 调整不同的单词，使它们不会在中间中断。
\n

\n\n

word-break: break-all

\n\n

\n
• 无论\xe2\x80\x99是一个连续的单词还是许多单词，\n它们都会在宽度限制的边缘处分解。（即即使在同一个单词的\n字符内）
\n

\n\n

因此，如果您有许多动态获取内容的固定大小的跨度，您可能更喜欢使用word-wrap: break-word，因为这样只有连续的单词才会在中间被打破，并且如果它\xe2\x80\x99 是一个包含许多单词的句子，空格进行调整以获得完整的单词（单词内没有中断）。

\n\n

如果\xe2\x80\x99 不重要，那就选择其中一个。

\n