CSS input box cutting off text-CodePudding

I am having an issue where the text in this input box is being cut off. I've increased the height and the width and it is still showing the same amount of characters. I've also used page-break-after: always and the issue is not being fixed. Here is the code:

    input[division]{
        font-size: 13px;
        height: 70px;
        resize: none;
        text-align: center;
        page-break-after: always
        
    }

<div><p><b><br>Division:</b><input id='transfer_out_division' type='text' value="EMD - AFC Program & Information Management" top required division></input></p></div>

I would like the text to go to the next line once it reaches the end of the input box. I was trying to make the input box at least 3 lines long. It fits perfectly with but I do not want to use that element as when I go to print, it prints a line lower and I found it difficult to fix. Input seems as the easiest way to get the printing constraints as consistent as possible.

This is what the printing properties produces when I use textarea:

I would like this to be on the same line for space purposes. How would I fix this?

CodePudding user response：

As above...use a textarea

    #textarea {
  display: flex;
  align-items: center;
}

#transfer_out_division {
  font-size: 13px;
  margin-left: 30px;
}

<div id="textarea">
<div><p>
  <b>Division:</b>
</p></div>
  <textarea id='transfer_out_division' type='text'
    placeholder="EMD - AFC Program & Information Management" top required division></textarea>
  </div>

You will just need to play around with this I have swapped the value for a placeholder so you can see the content.

CodePudding user response：

Although not ideal, I would add min-width: to your CSS, forcing the input tag to have a minimum width of your choice. For example: min-width: 20%;