Question 45770 in CSS Question posted in
Some basic documentation can be found here.

How to limit the number of characters shown in an input that has a lot more characters in it in CSS

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;
}
Tags:

2

Answers


  1. 0

    You could use,

    overflow: hidden;
text-overflow: ellipsis;
max-width: ?px;
    Login or Signup to reply.
  2. 0

    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;">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search