Как разбить слова на поле ввода, чтобы оно начинало новую строку после достижения ширины поля? - PullRequest
Новая
       59

Как разбить слова на поле ввода, чтобы оно начинало новую строку после достижения ширины поля?

0 голосов
/ 28 сентября 2019 

.form-container {
  float: left;
  width: 100%;
}

.form-container input[type=text] {
  padding-bottom: 40px;
  overflow-y: auto;
  overflow-wrap: break-word;
}
    <form class="form-container">
      First name:<br>
      <input type="text" name="firstname" value="Mickey">
      <br>
      Last name:<br>
      <input type="text" name="lastname" value="Mouse">
      <br><br>
      <input type="submit" value="Submit">
    </form>

Мне нужно использовать поле ввода, а не текстовую область, и я хотел бы, чтобы слова разрывались при достижении ширины поля ввода.На данный момент все написано в одной строке.

Найдите под кодом, который я пробовал.

Заранее спасибо за помощь этому новичку! 

.form-container {
  float: left;
  width: 100%;
}

.form-container input[type=text] {
  padding-bottom: 40px;
  overflow-y: auto;
  overflow-wrap: break-word;
}

    <form class="form-container">
      First name:<br>
      <input type="text" name="firstname" value="Mickey">
      <br>
      Last name:<br>
      <input type="text" name="lastname" value="Mouse">
      <br><br>
      <input type="submit" value="Submit">
    </form>

Ответы [ 2 ]

1 голос
/ 28 сентября 2019 

const mickey = document.querySelector('#firstname').textContent;
.form-container {
  float: left;
  width: 100%;
}

#firstname {
  padding-bottom: 40px;
  max-width: 60px;
  overflow-y: auto;
  overflow-wrap: break-word;
  border: 1px solid black;
}
    <form class="form-container">
      First name:<br>
      <div id="firstname" contenteditable="true">Mickey</div>
      <br>
      Last name:<br>
      <input type="text" name="lastname" value="Mouse">
      <br><br>
      <input type="button" value="Submit" onclick="console.log(mickey);">
    </form>

Вы не можете сделать это с текстовым полем ввода, но contenteditable div наверняка может помочь.Но будьте осторожны при создании чего-то, что получает значение от div, поскольку это приводит к непредвиденным последствиям.Я попытался вернуть значение из div, но оно не вернет реальное значение, так что здесь, вы сами!

0 голосов
/ 28 сентября 2019

Я не уверен, что именно вы подразумеваете под "разрывом", но если вы имеете в виду разрыв на отдельной строке, то, насколько я знаю, у вас не может быть многострочного поля ввода текста.

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

...