Jak korzystać z elipsy z przepełnieniem tekstu w polu wprowadzania html?

Question

Moja strona ma pola do wprowadzania danych, o których zastosowano następujące CSS:

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

Ale to nie wydaje się mieć żadnego wpływu. Czy brakuje mi czegoś oczywistego tutaj, czy nie jest możliwe, aby elipsa znajdowała się w polu wejściowym tylko za pomocą CSS?

Answer 1

Pole jest elementem z własnymi regułami. Pole wprowadzania jest zaimplementowane w taki sposób, że jeśli tekst będzie dłuższy niż pole, tekst stanie się niewidoczny.

Powodem tego jest, jeśli używasz pola w formularzu i możliwe byłoby użycie elipsy z przelewem tekstowym, wówczas przesyłana byłaby tylko zawartość skrócona, co nie jest pożądanym efektem.

Answer 2

Z moich testów Chrome, Safari i Firefox teraz go obsługują.

Jednak mają one nieco inne efekty.

Na rozmycie Firefox dołącza ... po prawej stronie tekstu, ale tylko wtedy, gdy tekst jest ukryty po prawej stronie pola tekstowego.

Podczas zamazywania Chrome wydaje się przeskakiwać na początek tekstu i dołącza ... na końcu, niezależnie od miejsca, w którym pozostawiono pozycję przewijania tekstu.

Answer 3

Wiem, że to stare pytanie, ale miałem ten sam problem i natknąłem się na this blog post from Front End Tricks And Magic, który zadziałał dla mnie, więc pomyślałem, że podzielę się tym, na co ludzie są ciekawi. Istotą bloga jest to, że MOŻESZ wykonać elipsę na wejściu w IE, jednak tylko wtedy, gdy dane wejściowe mają atrybut tylko do odczytu.

Oczywiście w wielu scenariuszach nie chcemy, aby nasze dane wejściowe miały atrybut tylko do odczytu. W takim przypadku możesz użyć JavaScript, aby go przełączyć. Ten kod jest pobierany bezpośrednio z bloga, więc jeśli znajdziesz tę odpowiedź jako pomocną, możesz rozważyć sprawdzenie bloga i pozostawienie komentarza uznania autorowi.

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

Ustawianie text-overflow:ellipsis na wejściu sama wystarczyły dla mnie. Skraca i umieszcza wielokropek, gdy sygnał wejściowy jest nieostry.