输入字段宽度超过时移至新行

时间:2017-08-09 06:27:57

标签: html css text newline line-breaks

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

我已经尝试了

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

提前致谢。

1 个答案:

答案 0 :(得分:0)

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

  • 会将长字包装在下一行。
  • 调整不同的单词,使它们不会在中间断开。

word-break: break-all

  • 无论是连续的单词还是多个单词,都是休息 它们在宽度限制的边缘。 (即使在 同一个字的字符)

因此,如果您有许多固定大小的跨度来动态获取内容,您可能只是更喜欢使用word-wrap: break-word,因为只有连续的单词在它们之间被打破,并且如果它是包含许多单词的句子,调整空格以获得完整的单词(单词中没有中断)。

如果没关系,请选择其中一个。