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

Posted 2023-03-06

【中文标题】当输入字段宽度超过时移动到新行

【英文标题】：Move to new line when input field width exceeds

【发布时间】：2018-01-16 21:29:17

【问题描述】：

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

我已经试过了

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;

提前致谢。

【问题讨论】：

你试过word-break: break-all;吗？

@KobyDouek 是的，我试过了。对我没用

看起来您正在尝试将文本包装在输入字段中，这是不可能的。如果您要显示实际生成的 html 而不是服务器端脚本，那么提供帮助会更容易。

【参考方案1】：

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

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

word-break: break-all

不管是连续词还是多词，都断 它们在宽度限制的边缘。 （即即使在 同一个单词的字符）

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

如果没关系，随便选一个。

【讨论】：

仍然当我输入新文本时，它继续在同一行。似乎输入字段宽度从内部增加

对问题中指定的输入 HTML 元素没有任何影响。

【参考方案2】：

HTML 输入元素不会以您所描述的方式换行。见here。

但是，您可以将input type=['text'] 更改为textarea，当用户键入时，文本将换行到下一行。见this answer。