React.js: Show '...' after value in input element onBlur if value overflows input element

user_13145176 0
Viewed 100

I have an <input> element that occupies a single row, and users can type more text into the <input> element than it can display.

I want to display '...' after the visible part of the input element when it blurs if the value inside is too long to display.

Is this possible without modifying the value itself? Also, I don't want to use some sort of solution that counts the number of characters in the value, since the width of the input can change.

reactjs css html javascript
1 Answers

you just need text-overflow set to ellipsis

input {
  text-overflow: ellipsis;
  padding: 5px;
  font-size: 1.2rem;
}
<input type="text"/>

user_60943480
Related