Cara menggunakan CSS untuk menukar teks berlebihan kepada elips

CSS ialah teknologi yang sangat penting dalam pembangunan bahagian hadapan Ia memainkan peranan yang sangat penting dalam reka bentuk web dan kawalan gaya. Dalam artikel ini, saya akan menunjukkan kepada anda cara menggunakan CSS untuk menukar teks daripada tersembunyi kepada elipsis.

1. Teks melebihi penyembunyian

Apabila teks pada halaman melebihi julat tertentu, kadangkala ia perlu menyembunyikannya dan hanya memaparkan sebahagian daripada teks. Pada masa ini, kita boleh menggunakan sifat limpahan dalam CSS untuk mencapai ini.

Atribut limpahan boleh digunakan untuk mengawal cara kandungan di dalam elemen dikendalikan apabila ia melebihi kawasan bekas Nilai atribut biasa termasuk tersembunyi, boleh dilihat, auto dan tatal.

Apabila kami menetapkan overflow:hidden, kandungan di luar kawasan kontena akan disembunyikan.

Sebagai contoh, kita boleh menetapkan overflow:hidden untuk bekas div dalam CSS, dan kemudian memasukkan banyak teks Teks akan melebihi skop bekas, tetapi akan disembunyikan, dan hanya kandungan di dalamnya bekas itu boleh dilihat sebahagian daripada teks. Ini mencapai teks yang tidak dapat disembunyikan.

2. Pelaksanaan elips

Teks di luar penyembunyian hanyalah teks tersembunyi, tetapi dalam beberapa kes hanya menyembunyikan teks tidak mencukupi, kita perlu menunjukkan kepada pengguna maklumat teks yang berlebihan. Pada masa ini, anda perlu menambah elipsis pada penghujung teks tersembunyi. Dengan cara ini, pengguna boleh mengetahui maklumat teks yang ditinggalkan tanpa menjejaskan reka letak keseluruhan halaman.

Dalam CSS, kita boleh menggunakan atribut limpahan teks untuk menambah elips. Atribut limpahan teks boleh digunakan untuk mengawal cara teks luar julat dipaparkan Nilai biasa ialah elipsis, yang bermaksud elips digunakan untuk menggantikan teks luar julat.

Walau bagaimanapun, perlu diambil perhatian bahawa atribut limpahan teks hanya akan berkuat kuasa apabila tiga syarat berikut dipenuhi pada masa yang sama:

1 Atribut ruang putih bagi elemen mesti ditetapkan kepada nowrap atau pra; nilai tetap.

Dengan alasan bahawa tiga syarat di atas dipenuhi, kita boleh menggunakan atribut limpahan teks untuk menukar teks luar julat kepada elips.

Sebagai contoh, kita boleh menyembunyikan teks dalam bekas div dan menggunakan atribut text-overflow untuk menambah elips:

div{

overflow: hidden;

text- overflow : elipsis;

ruang putih: nowrap;

lebar: 200px;
}

Dalam contoh ini, kami menyembunyikan teks dalam bekas div dan mengehadkan lebar bekas itu ialah 200 piksel , dan sifat limpahan teks digunakan untuk menggantikan teks luar julat dengan elips.

3. Kesimpulan

Penggunaan teks tersembunyi dan elips adalah teknik biasa dalam CSS, yang memainkan peranan yang sangat penting dalam reka bentuk dan reka letak halaman web. Walau bagaimanapun, apabila menggunakannya, anda perlu memberi perhatian kepada tetapan pelbagai atribut dan keadaan untuk mencapai hasil yang diharapkan. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara menggunakan CSS untuk menukar teks berlebihan kepada elips. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!