Как использовать многоточие переполнения текста в поле ввода HTML?

Question

На моей веб-странице есть поля ввода, к которым я применил следующие css:

.ellip {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

Но, похоже, это не имеет никакого эффекта.Я что-то упускаю здесь очевидное или многоточие в поле ввода невозможно использовать только с помощью CSS?

Answer 1

Я знаю, что это старый вопрос, но у меня возникла та же проблема, и я наткнулся на это сообщение в блоге из Front End Tricks And Magic , которое мне помогло, поэтому я решил поделиться этим в случае люди все еще любопытны. Суть блога заключается в том, что вы МОЖЕТЕ сделать многоточие на входе также в IE, но только если вход имеет атрибут readonly.

Очевидно, что во многих сценариях мы не хотим, чтобы наш ввод имел атрибут только для чтения. В этом случае вы можете использовать JavaScript для его переключения. Этот код взят непосредственно из блога, поэтому, если вы найдете этот ответ полезным, вы можете проверить блог и оставить благодарственный комментарий автору.

// making the input editable
$('.long-value-input').on('click', function() {
  $(this).prop('readonly', '');
  $(this).focus();
})

// making the input readonly
$('.long-value-input').on('blur', function() {
  $(this).prop('readonly', 'readonly');
});

.long-value-input {
  width: 200px;
  height: 30px;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="long-value-input-container">
  <input type="text" class="long-value-input" value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" readonly />
</div>

Answer 2

Установка text-overflow:ellipsis на самом входе сделала свое дело для меня. Он обрезает и помещает многоточие, когда вход не в фокусе.

Answer 3

Из моего тестирования Chrome, Safari и Firefox теперь поддерживают его.

Однако они имеют немного разные эффекты.

При размытии Firefox добавляет ... ксправа от текста, но только в том случае, если справа от текстового поля скрыт какой-либо текст.

В то время как при размытии Chrome, кажется, переходит к началу текста и добавляет ... в конценезависимо от того, где вы оставили позицию прокрутки текста.

Answer 4

Поле - это элемент со своими правилами. Поле ввода реализовано таким образом, что если текст становится длиннее, чем поле, текст становится просто невидимым.

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