Переполнение текста в заполнителе HTML-ввода: многоточие не работает в фокусе (только веб-набор)

Question

В браузерах на основе webkit (Google Chrome & Safari), когда я пытаюсь показать заполнитель текста в элементе ввода, если заполнитель слишком длинный, я хочу использовать text-overflow: ellipsis css, чтобы отобразить "..." длявырезать текст.

Сначала это работает, но когда я щелкаю элемент ввода перед тем, как что-либо вводить, заполнитель все еще отображается, но не многоточие.

Пример: https://jsfiddle.net/cqsguwpm/1/

Обратите внимание, что в Firefox этого не происходит, поэтому я предположил, что эта проблема возникает только в браузерах на основе webkit.

Как показано в примере, я попытался добавить правило text-overflow: ellipsis в .input:focus::placeholder { } и .input:active::placeholder { } тоже, потому что я подозревал, что фокус и активные стили перезаписали правило многоточия, но, видимо, оно все еще не работает

Мне нужно знать, возможно ли это сделать в webkit или нетна основе браузера, так как я предполагаю, что это может быть просто одним из недостатков webkit.

Answer 1

После возни с твоим jsfiddle, я в растерянности, почему это происходит.Нет ничего невозможного, но после многих лет взлома ошибок с помощью CSS, я бы, вероятно, больше не стал заниматься этим.Если вам действительно нужен многоточие, попробуйте следующее:

<input type="text" placeholder="it's a really long placeholder"><span></span>

.search-bar {
  overflow: hidden;
  text-overflow: ellipsis;
}
span {
  margin-left: -15px;
  background: #fff;
}
input:focus + span::after {
  content: "...";
}

Вам придется поиграть с размером шрифта, семейством шрифтов и цветом, чтобы получить его правильно.