Bagaimana untuk Memotong Teks dengan Elegan dalam Teg H2 dengan Ellipsis?

Memotong Teks dalam Teg HTML Menggunakan Ellipsis

Dalam dunia reka bentuk web responsif, adalah perkara biasa untuk menghadapi situasi di mana kandungan mungkin melebihi yang tersedia lebar elemen, mengakibatkan pembalut atau pecah teks yang tidak diingini. Untuk tajuk (h2) dengan panjang teks dinamik, ini boleh memberikan cabaran estetik.

Masalah:
Bagaimanakah anda boleh memotong kandungan secara elegan dalam teg h2 dan menambah elipsis ( ...) apabila teks melebihi lebar skrin atau bekas yang tersedia?

Penyelesaian:
Mujurlah, penyemak imbas web moden menyediakan penyelesaian yang ringkas dan merentas pelayar menggunakan CSS. Dengan menambahkan kelas CSS berikut pada teg h2, anda boleh mencapai kesan yang diingini:

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

Kelas CSS ini menggunakan tetapan berikut:

• ruang putih: nowrap menghalang teks daripada membalut ke baris baharu.
• limpahan: tersembunyi menyembunyikan sebarang kandungan yang melebihi lebar yang tersedia.
• limpahan-teks: elipsis dan -o-text-overflow: ellipsis (untuk Opera ) memaparkan elipsis (...) pada penghujung teks yang dipotong.

Menggunakan kelas CSS ini, teg h2 akan memotong kandungannya dengan anggun dan menambah elipsis apabila ia menjadi terlalu lebar untuknya bekas. Ambil perhatian bahawa penyelesaian ini sah untuk semua penyemak imbas utama sejak penulisan, kecuali Firefox 6.0. Untuk sokongan dalam versi Firefox yang lebih awal, pertimbangkan penyelesaian yang disediakan dalam soalan terpaut yang disebut dalam jawapan.

Atas ialah kandungan terperinci Bagaimana untuk Memotong Teks dengan Elegan dalam Teg H2 dengan Ellipsis?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!