當輸入字段寬度超過時移至新行

我試圖在第一行沒有更多空間時將多餘文本移動到新行。但是，我的文本只是在填充同一行而不移動到另一行。我怎樣才能解決這個問題？當我在第一行填入文字時，我想移到下一行。當輸入字段寬度超過時移至新行

我已經嘗試過

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

在此先感謝。

來源

2017-08-09 CraZyDroiD

你有沒有試過'文字破解：打破所有;'？ –

@KobyDouek是的，我試過it.did不適合我 – CraZyDroiD

它看起來像你正在嘗試在輸入字段中包裝文本，這是不可能的。如果你要顯示實際生成的HTML而不是你的服務器端腳本，那麼它會更容易幫助。 – RoToRa

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

將包裹長單詞到下一行。
調整不同的單詞，使他們不會中斷。

word-break: break-all

不管它是一個連續的字或許多字，打破起來在的寬度限制的邊緣。（即即使在同一字的字符）

所以，如果你有很多固定大小跨度動態地獲取內容，你可能只是更喜歡使用word-wrap: break-word，因爲這種方式只有連續單詞之間打破了，並且如果它是包含許多單詞的句子，則空格被調整以獲得完整的單詞（在單詞內不中斷）。

如果沒關係，那就去做。

來源

2017-08-09 06:32:14

仍然當我鍵入新的文本，它仍然在同一行。它似乎輸入字段寬度從內部增加 – CraZyDroiD

當輸入字段寬度超過時移至新行

回答

相關問題