У моей веб-страницы есть поля ввода, к которым я применил следующие css:
.ellip {
white-space: nowrap;
width: 200px;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
Но это, похоже, не имеет никакого эффекта. Я пропустил что-то очевидное здесь или не возможно иметь многоточие во входном поле, используя только CSS?
Поле - это элемент со своими собственными правилами. Поле ввода реализовано так, что если текст становится длиннее поля, текст становится невидимым.
Причиной этого является то, что если вы используете поле в форме и можно будет использовать многоточие с переполнением текста, тогда он будет передавать только усеченный контент, что не является желаемым эффектом.
Я знаю, что это старый вопрос, но у меня была такая же проблема, и я встретил этот пост в блоге от 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' );
});
Настройка text-overflow:ellipsis на самом входе сделала трюк для меня. Он усекает и помещает многоточие, когда вход находится вне фокуса.
Из моего тестирования Chrome, Safari и Firefox теперь поддерживают его.
Однако они имеют несколько иные эффекты.
В размытии Firefox добавляет... справа от текста, но только если есть какой-либо текст, скрытый правой частью текстового поля.
В то время как при размывании Chrome, кажется, переходит в начало текста и добавляет... в конце, независимо от того, где вы оставили позицию прокрутки текста.