Fade right side of the text of a material design like input

I'm trying to improve UI so user understands that there is more text than what he sees on the screen. I had couple of ideas:

  1. Fade right side of the input
  2. Place 3 dots if the text is longer than the field

I've implemented the first option with a css ::after which has gradient background.

.fade-out-right::after {
    content: " ";
    position: absolute;
    right: 5px;
    top: 0;
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));
    width: 25px;
    height: 100%;
    pointer-events: none
}

fade right of a textbox

The problem is when user selects the text or goes to end of the text, the fade is still visible, and this is unwanted. Results in confusing the user more than it helps. Possibly I can fix this with js but want ideas how I can improve user experience before actually implementing things.

Tags: