CSS невозможно получить текст, чтобы разбить и начать со следующей строки ниже с переносом слов - PullRequest
Новая
       8

CSS невозможно получить текст, чтобы разбить и начать со следующей строки ниже с переносом слов

0 голосов
/ 11 февраля 2020

Я довольно новичок в 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>

Любой совет будет принята с благодарностью.

Приветствия

1 Ответ

0 голосов
/ 11 февраля 2020

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, но я предполагаю, что у вас может быть своего рода препроцессор, поэтому я оставил это как есть в моем ответе.

...