A simple text area acting as in a post, I want the line to break at the of the post instead of overflowing on the same line.

.post input {
  outline: none;
  font-size: 15px;
  font-family: sans-serif;
  font-weight: 300;
  width: 200px;
  padding-top: 15px;
  padding-left: 25px;
  font-size: 25px;
  border: none;
  background-color: transparent;
  width: 100%;
}

<div class="post">
  <input type="textarea" placeholder="What's on your mind?" rows="4" cols="50">
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use a <textarea> element to more easily fix the issue :

.post input{
    outline: none;
    font-size: 15px;
    font-family: sans-serif;
    font-weight: 300;
    width: 200px;
    padding-top: 15px;
    padding-left: 25px;
    font-size: 25px;
    border: none;
    background-color: transparent;
}

<div class="post">
    <textarea placeholder="What's on your mind?" rows="4" cols="50"></textarea>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

input[type="text"] does not line break by design, which is why textarea is preferred for this application.