'CSS input box cutting off text

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: enter image description here

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

javascripthtmlcss


Solution 1:[1]

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.

Solution 2:[2]

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%;

Solution 3:[3]

You can also make it so the height and width are equal to fit-content

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 bachar97
Solution 3 Shadow Avenger

Related Questions