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

Question

а просто переносился текст в мобилке сильно обрезается

 input {
   display: block;
   font-size: 25px;
   width: 100%;
 }

<input type="text" placeholder="Ваш телефон для заказа обратной связи">

Answer 1

Раз браузер позволяет достучаться в #shadow-dom через псевдоэлемент до блока (по сути, простого <div>), то остаётся найти какие свойства можно к нему применить. В комментариях Вам правильно подсказали - white-space и font-size - главные в решении этой задачи.

Тянем за нижний правый уголок, смотрим изменения, стилизуем по вкусу:

input {
  display: block;
  font-size: 36px;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
}

input::placeholder {
  transform: translatey(-50%);
  font-size: 33.33%;
  white-space: normal;
  /* Только для примера */
  color: red;
  text-align: center;
}

/* Только для примера --> */ resizer { display: flex; flex-direction: column; gap: 8px; max-width: 100%; overflow: hidden; resize: horizontal; box-shadow: 0 0 2px #0008; }

<resizer>
  <input type="text" placeholder="Ваш телефон для заказа обратной связи" style="width: 100%;">
  <input type="text" placeholder="Ваш телефон для заказа обратной связи" style="width: 66%;">
  <input type="text" placeholder="Ваш телефон для заказа обратной связи" style="width: 33%;">
</resizer>

БЛОГ НА HUSL

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

Ответы (1 шт):