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

Question

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.

Answer 1

you just need text-overflow set to ellipsis

input {
  text-overflow: ellipsis;
  padding: 5px;
  font-size: 1.2rem;
}

<input type="text"/>