Multiple dots for input html

Question

I have a React component that encapsulates the input html tag. The default behaviour for input tag is if the characters are more than what the input can display, we can scroll to left and right with invisible scroll (e.g. I type John Smitheens for size 11).

I want to make the display change to John Smith... if the input is unfocused (not clicked).

I don't know the size or number of characters I want to limit beforehand because the React component is used in a lot of places and the size differs based on parent component (width: 100%). Is there a way to get the input size or know when the characters exceed the input width? Thank you

<!DOCTYPE html>
<html>
<body>
  <input placeholder="Search User" type="text" size="11">
</body>
</html>

score 1 · Answer 1 · answered Apr 29 '20 at 06:21

1

Just add text-overflow: ellipsis; to the input

input {
  text-overflow: ellipsis;
}

<!DOCTYPE html>
<html>

<body>
  <input placeholder="Search User" type="text" size="11">
</body>

</html>

answered Apr 29 '20 at 06:21

reymon359

1,240
2
11
34

score 1 · Accepted Answer · answered Apr 29 '20 at 06:22

1

Try this in your stylesheet :)

Add it to your input css.

text-overflow: ellipsis;

Similar case here:

how to add three dots to text when overflow in html?

Multiple dots for input html

2 Answers2