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

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

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

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

Ответ 1

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

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

Ответ 2

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

Очевидно, что во многих сценариях мы не хотим, чтобы наш ввод имел атрибут 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' );
});

Ответ 3

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

Ответ 4

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

Однако они имеют несколько иные эффекты.

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

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