Limpahan teks - Trik CSS | CSS Almanac 2025

The text-overflowharta di CSS berkaitan dengan situasi di mana teks dipotong apabila ianya melimpah kotak elemen ini. Ia boleh dipotong (iaitu dipotong, disembunyikan), memaparkan elipsis ('…', Nilai Rentang Unicode U + 2026) atau memaparkan rentetan yang ditentukan oleh pengarang (tidak ada sokongan penyemak imbas semasa untuk rentetan yang ditentukan oleh pengarang).

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

Perhatikan bahawa text-overflowhanya berlaku apabila overflowharta penampung mempunyai nilai hidden, scrollatau autodan white-space: nowrap;.

Overflow teks hanya dapat terjadi pada elemen level blok atau inline-block, kerana elemen tersebut harus memiliki lebar agar dapat di-overflow. Limpahan berlaku ke arah seperti yang ditentukan oleh sifat arah atau atribut yang berkaitan.

Demo berikut menunjukkan tingkah laku text-overflowharta benda termasuk semua nilai yang mungkin. Sokongan penyemak imbas berbeza-beza!

Lihat Pen ini!

Menetapkan overflowke scrollatau autoakan memaparkan bar tatal untuk menunjukkan teks tambahan, sementara hiddentidak akan. Teks tersembunyi boleh dipilih dengan memilih elips.

Barang lama

Versi lama dari spesifikasi mengatakan bahawa anda boleh menggunakan URL untuk gambar untuk elipsis, tetapi nampaknya ia dijatuhkan.

Terdapat sintaks dua nilai, misalnya text-overflow: ellipsis ellipsis;, yang akan mengawal limpahan di sisi kiri dan kanan bekas yang sama. Saya tidak pasti bagaimana perkara itu dapat dicapai. Mungkin teks terpusat dalam bekas yang terlalu kecil? Spesifikasi baru mengatakan ini, serta mendefinisikan rentetan, "berisiko."

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

The text-overflowharta yang digunakan sebagai singkatan untuk gabungan text-overflow-modedan text-overflow-ellipsis, tetapi tidak lagi dan orang-orang tempat penginapan yang berasingan tidak wujud.