CSS无法使文本中断并使用自动换行从下面的下一行开始

问题描述 投票:0回答:1

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

任何建议将不胜感激。

欢呼声

css word-wrap
1个回答
0
投票

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,但我猜您可能有某种预处理器,所以我在回答中保留了原样。

© www.soinside.com 2019 - 2024. All rights reserved.