If the input field has a long placeholder , then how to make it appear completely, and not cut off?

Code:

<input id="m" onkeydown="userIsTyping()" placeholder='Type your message here. Use "private to {nickname}:" to send private message. ' autocomplete="off">

All code: https://github.com/Eramik/webdev-study-socket-chat/blob/master/node/index2.html

  • increase the size of the field? - Ivan Frolov
  • Add some code that will clarify your question. - Denis Bubnov
  • github.com/Eramik/webdev-study-socket-chat/blob/master/node/... There is all the code. Increase the field in what sense? And if this device with a small screen? - Erami
  • one
    How do you think this problem should be solved? - xaja
  • one
    A question from the category "how to fit a watermelon in a coffee mug" ... either reduce the text or increase the input. it's obvious) either use a tooltip, it is for this purpose IMHO. - lexxl

2 answers 2

How many percent of the placeholder length will be shown depends on the size of the field and is controlled by the browser.
In a small field, a large text will be cut off anyway, this is logical.
You can, perhaps, stylize a hint .

  • I went through Microsoft Edge and chrome. Everything is the latest version, and does not display examples on the site as they were intended. - Erami
  • @Erami, I went through the chrome, and through FF, and through the opera (the same Blink ) - everything works and is displayed. - user207618
  • At least an example with an ellipse, which is just for me - Erami
  • Try to put the style and use ::-ms-input-placeholder prefix. It is :: , and not : They say in Edge helps. - user207618
  • I don't really need an ej, the main thing is chrome. prnt.sc/b3lyyq - Erami

It is possible through JS to get the length of the string placeholder and if the width of the input changed to the length of the text.