3

When I add text-overflow: ellipsis to an input element, the element is scrollable. When I place my cursor over the element, I can scroll left and right as if the text was full width and not truncated, although there is no text after the .... How do I stop this behaviour!?

input {
  width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<input value="A string that is longer than the input field" />

Improve this question
6
  • I'm not sure I can see the problem you are describing, are you using a specific browser? or scrolling it in an unusual way? (The only ways I can find to scroll it will switch to showing all of the text) Commented Apr 1, 2021 at 13:04
  • Do you have a screen on the issue? I can't see it with this particular example Commented Apr 1, 2021 at 13:06
  • Hmm, actually, I can replicate it using dev tools to emulate a touch device, but that might be an emulation issue. Are you using gestures to scroll? Commented Apr 1, 2021 at 13:07
  • I guess you can add disabled attribute to input to disable this behavior (and input itself). Not sure if it is the answer you were looking for. Commented Apr 1, 2021 at 13:08
  • I am using a Macbook with trackpad gestures to scroll. Disabling the input has no effect on this behaviour. Commented Apr 1, 2021 at 13:37
Related questions
336
text-overflow: ellipsis not working
94
How to use text-overflow ellipsis in an html input field?
4
text-overflow as ellipsis not working
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.