I have an input fields that's a specific width. It can hold up to 14 characters total, but I want it to only show as many as 3. Can't seem to find an answer online. Is it even possible? Because if I have 888, part of the 3rd 8 is cut off. And if I have 1111, part of the 4th 1 is visible. And I can't cover it with margins or paddings. And I don't want to cover it with another element if it's possible to adjust the number of items displayed.
3rd 8 is cut off 4th 1 is visible
input {
margin-top: 30px;
background: none;
border-style: solid;
border-width: 2px;
border-color: azure;
border-radius: 15px;
height: 80px;
width: 80px;
font-size: 50px;
text-align: center;
color: azure;
outline: none;
transition: 0.2s;
padding-inline: 10px;
font-family: monospace;
}
There are various attributes and CSS settings which can help.
This snippet sets the font-family to a monospace font so each of the characters has the same width. There are various different monospace fonts available if you don't like the look of Courier or are worried that another local font may be picked up.
The input element width is set via CSS to the total number of characters (3), using the ch CSS unit. This allows for just 3 characters to be seen.
The total number of characters that the user is allowed to input is more than this (14) and is set using an attribute.
<input maxlength="14" type="text" style="width: 3ch; font-family: Courier, monospace; padding: 0;">