Как использовать многоточие переполнения текста в поле ввода 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

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

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

Answer 2

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

Answer 3

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

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

HTML:

<div class="long-value-input-container">
  <input type="text" 
    value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" class="long-
    value-input" readonly />
</div> 

CSS:

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

JavaScript (с использованием jQuery)

// 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' );
});

Answer 4

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

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

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

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