CSS 无法使用自动换行让文本中断并在下一行开始

Question

我是 css 的新手，有点卡在这个页面上： https://www.cadencepsychology.com.au/anxiety-reassurance-generator/

我无法让输入到字段中的文本换行到框并下拉到下一行。相反，只是继续在一行上连续写入。

#wordbox {
    /*opacity: 0;*/
    margin: 30px auto 0;
    display: block;
    width: 960px;
    height: 200px;
    font-size: 30px;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
    background: #fff;
    border-radius: 6px;
    color: #black;
    transition: 1s linear;
}

<body>
Type in your current worry below, click the "Reassure Me" button, and let our trusty reassurance generator give you an answer to put you at ease so that you can get on with your day*.     
</body>

<FORM NAME="WordForm">  
<INPUT TYPE=TEXT NAME="WordBox" id="wordbox"><BR>
<INPUT TYPE=BUTTON VALUE="Reassure Me!" onClick="PickRandomWord(document.WordForm);" id="button">
</FORM>

如有任何建议，我们将不胜感激。

干杯

Answer 1

CSS 不能这样做。相反，您需要求助于更改 HTML，将 <input type="text"> 替换为 <textarea>:

#wordbox {
  /*opacity: 0;*/
  margin: 30px auto 0;
  display: block;
  width: 960px;
  height: 200px;
  font-size: 30px;
  text-align: center;
  word-wrap: break-word;
  white-space: normal;
  background: #fff;
  border-radius: 6px;
  color: #black;
  transition: 1s linear;
}

<body>
  Type in your current worry below, click the "Reassure Me" button, and let our trusty reassurance generator give you an answer to put you at ease so that you can get on with your day*.
  <FORM NAME="WordForm">
    <TEXTAREA NAME="WordBox" id="wordbox"></TEXTAREA>
    <INPUT TYPE="BUTTON" VALUE="Reassure Me!" onClick="PickRandomWord(document.WordForm);" id="button" />
  </FORM>
</body>

另请注意，您不应使用 <br>，因为它在 <form> 中无效。相反，您应该选择 CSS' margin / padding 来控制文本分隔。另请注意，您的 HTML 必须位于 </body> 结束标记内。我已将您的 HTML 稍作调整以更正此问题。

最后，color: #black 无效 CSS，但我猜您可能有某种预处理器，所以我在回答中保留了原样。

CSS 无法使用自动换行让文本中断并在下一行开始

CSS can't get text to break and start on the next line below with word-wrap

css

word-wrap