Как сделать, чтобы не обрезался текст в плейсхолдере?

Question

[marinkas]

а просто переносился текст
в мобилке сильно обрезается
https://jsfiddle.net/e631whpg/

Answer 1

[Ankhena]

Во-первых, задать плейсхолдеру white-space: pre-line;

Во-вторых, задавать высоту инпуту так, чтобы текст поместился. Вычислять на js.
И придется включать позиционирование, чтобы текст оказался по центру. Либо абсолютное, либо relative, указывая сдвиг на js.

white-space: pre-line;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

В-третьих, всё это будет очень странно выглядеть при вводе текста в инпут. Огромный высоты инпут и в нем по центру одна строка.

А главное: вы перепутали placeholder и <label>.
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Note: Do not use the placeholder attribute instead of a <label> element. Their purposes are different: the <label> attribute describes the role of the form element; that is, it indicates what kind of information is expected, the placeholder attribute is a hint about the format the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.

Comments

[marinkas]

Ankhena, та вроде не лейбл

[Ankhena]

marinkas,

та вроде не лейбл

Перечитайте, пожалуйста, спеку. Для чего нужен placeholder, а для чего label.
То, что нарисовано у вас на скринах это лейблы.
Да, часто при коротких фразах не заморачиваются и если так надо по дизайну, используют placeholder вместо label.

В вашем случае, о том, что телефон нужен именно для обратной связи (если это и так не очевидно), можно написать где-то в другом месте.

[marinkas]

Ankhena, я понимаю для чего они.
Но лейблы обычно выносят за инпут. А тут он прям на инпуте. Возможно, ошибаюсь

[Ankhena]

marinkas, "прямо на" в дизайне не значит, что это плейсхолдер. Это значит, что дизайнер нарисовал label поверх инпута.

Answer 2

[Everybody_Lies]

источник

Comments

[marinkas]

Everybody_Lies , у вас сейчас скрывается, а не переноситься