Text-overflow - Trik CSS | CSS Almanak 2024

The text-overflowproperti di CSS berkaitan dengan situasi di mana teks terpotong ketika meluap kotak elemen. Ini dapat dipotong (yaitu terpotong, disembunyikan), menampilkan elipsis ('…', Nilai Rentang Unicode U + 2026) atau menampilkan string yang ditentukan penulis (tidak ada dukungan browser saat ini untuk string yang ditentukan penulis).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Perhatikan bahwa text-overflowhanya terjadi jika overflowproperti penampung memiliki nilai hidden, scrollatau autodan white-space: nowrap;.

Teks melimpah hanya dapat terjadi pada blok atau elemen tingkat blok sebaris, karena elemen harus memiliki lebar agar dapat meluap. Overflow terjadi ke arah yang ditentukan oleh properti direction atau atribut terkait.

Demo berikut menampilkan perilaku text-overflowproperti termasuk semua kemungkinan nilai. Dukungan browser bervariasi!

Lihat Pena ini!

Mengatur overflowke scrollatau autoakan menampilkan bilah gulir untuk menampilkan teks tambahan, sementara hiddentidak. Teks tersembunyi dapat dipilih dengan memilih elipsis.

Barang lama

Versi lama dari spesifikasi mengatakan Anda dapat menggunakan URL ke gambar untuk elipsis, tapi sepertinya itu dijatuhkan.

Ada sintaks dua nilai, misalnya text-overflow: ellipsis ellipsis;, yang akan mengontrol luapan di sisi kiri dan kanan wadah yang sama. Saya tidak yakin bagaimana itu bisa tercapai. Mungkin teks di tengah dalam wadah yang terlalu kecil? Spesifikasi baru mengatakan ini, serta menentukan string, adalah "berisiko".

Saya tidak yakin dari mana ellipsis-wordasalnya. Ini tidak ada dalam spesifikasi atau dalam dokumentasi lain selain di WebPlatform.org.

The text-overflowproperti yang digunakan untuk menjadi singkatan untuk kombinasi text-overflow-modedan text-overflow-ellipsis, tapi sekarang tidak lagi dan properti-properti yang terpisah tidak ada.