Pertanyaan Bagaimana cara menggunakan elipsis teks-overflow di bidang masukan html?


Halaman web saya memiliki kolom input yang saya terapkan css berikut:

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

Tapi ini sepertinya tidak memiliki efek apa pun. Apakah saya kehilangan sesuatu yang jelas di sini atau tidak mungkin memiliki elipsis di bidang input hanya menggunakan CSS?


32
2018-03-19 14:16


asal


Jawaban:


Bidang adalah elemen dengan aturannya sendiri. Bidang input diimplementasikan dengan cara jika teks lebih panjang dari bidang, teks menjadi tidak terlihat.

Alasan untuk ini adalah, jika Anda menggunakan bidang dalam bentuk dan akan mungkin untuk menggunakan elips teks-overflow, maka itu hanya akan mengirimkan konten yang terpotong, apa yang bukan efek yang diinginkan.


-10
2018-03-19 14:26



Saya tahu ini adalah pertanyaan lama, tetapi saya mengalami masalah yang sama dan datang posting blog ini dari Front End Trik Dan Sihir yang berhasil bagi saya, jadi saya pikir saya akan berbagi kalau-kalau orang masih penasaran. Inti dari blog adalah bahwa Anda BISA melakukan elipsis dalam input di IE, namun hanya jika input memiliki atribut readonly.

Tentunya dalam banyak skenario kami tidak ingin masukan kami memiliki atribut yang hanya bisa dibaca. Dalam hal ini Anda dapat menggunakan JavaScript untuk beralih. Kode ini diambil langsung dari blog, jadi jika Anda menemukan jawaban ini bermanfaat, Anda dapat mempertimbangkan untuk memeriksa blog dan meninggalkan komentar penghargaan kepada penulis.

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

15
2017-11-05 18:41



Pengaturan text-overflow:ellipsis pada input itu sendiri melakukan trik untuk saya. Memotong dan menempatkan elipsis ketika input tidak fokus.


8
2017-11-24 03:21



Dari pengujian saya, Chrome, Safari, dan Firefox sekarang mendukungnya.

Namun mereka memiliki efek yang sedikit berbeda.

Pada blur Firefox menambahkan ... ke kanan teks tetapi hanya jika ada teks yang disembunyikan oleh sisi kanan kotak teks.

Sedangkan di blur Chrome tampaknya melompat ke awal teks dan menambahkan ... pada akhirnya, terlepas dari di mana Anda meninggalkan posisi gulungan teks.


4
2018-03-19 14:31