Bagaimana untuk Memotong Kandungan HTML dengan Ellipsis untuk Reka Letak Responsif?

Memangkas Kandungan HTML dengan Ellipsis untuk Reka Letak Responsif

Dalam dunia reka bentuk web yang dinamik, mengurus lebar kandungan berubah-ubah selalunya boleh menjadi satu cabaran. Apabila tajuk atau elemen teks lain melebihi lebar bekas yang tersedia, pembalut baris yang tidak diingini boleh berlaku. Untuk persembahan yang lebih digilap, adalah penting untuk mencari penyelesaian yang memotong kandungan dengan elegan dan memaparkan elipsis (...) jika perlu.

Pemotongan Berasaskan CSS

Nasib baik, CSS moden menyediakan penyelesaian yang mudah. Dengan menggunakan kelas CSS berikut pada teg yang berkaitan, anda boleh mencapai pemangkasan yang menarik secara visual dengan sokongan merentas kebanyakan penyemak imbas utama:

<code class="css">.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}</code>

Kod CSS ini memaksa teks kekal pada satu baris (ruang putih) , menghalang limpahan dengan menyembunyikan kandungan berlebihan (limpahan) dan memotong teks dengan elipsis (limpahan teks).

Nota: Firefox 6.0 adalah pengecualian dan tidak menyokong teknik ini.

Alternatif jQuery (Pemotongan Berbilang Talian)

Jika anda memerlukan sokongan untuk teks berbilang baris atau versi Firefox yang lebih awal, penyelesaian berasaskan jQuery mungkin diperlukan. Walau bagaimanapun, pendekatan ini biasanya tidak disyorkan kerana ia menambahkan overhed yang tidak perlu pada tapak web anda.

Atas ialah kandungan terperinci Bagaimana untuk Memotong Kandungan HTML dengan Ellipsis untuk Reka Letak Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!